/**
* 倒计时 Create By TuJia @2017.10.17
* 使用方法:
* leftTimer.run(container[,theme][,callback]);
*
* 支持 jQuery选择器 及 原生选择器(不依赖jQuery)
*
* 示例(jquery 选择器):
* leftTimer.run($('.countdown'));
* leftTimer.run($('.countdown'), 'D天H时M分S秒');
* leftTimer.run($('.countdown'), 'D天H时M分S秒', function(obj){
* // do some things
* // obj.html('已结束'); 或 location.reload();
* });
*
* 示例(原生选择器):
* leftTimer.run(document.querySelectorAll('.countdown'));
* leftTimer.run(document.querySelectorAll('.countdown'), 'D天H时M分S秒');
* leftTimer.run(document.querySelectorAll('.countdown'), 'D天H时M分S秒', function(obj){
* // do some things
* // obj.innerHTML = '已结束'; 或 location.reload();
* });
*/ var leftTimer = {
startTime:0,
count:0,
interval:1000,
oneday:3600 * 24,
str:'',
day:0,
hour:0,
minute:0,
second:0,
show_day:false,
show_hour:false,
show_minute:false,
show_second:false,
offset:0,
next_time:0,
run:function(container, theme, cb){
var scope = this; scope.startTime = new Date().getTime();
scope.next_time = scope.interval;
scope.count = 0;
scope.offset = 0; theme = theme || "D天H时M分S秒";
cb = cb || function(){ location.reload() }; scope.show_day = theme.indexOf('D')!=-1;
scope.show_hour = theme.indexOf('H')!=-1;
scope.show_minute = theme.indexOf('M')!=-1;
scope.show_second = theme.indexOf('S')!=-1; for(var i=0,len=container.length; i<len; i++){
var _this = container[i];
_this.setAttribute('data-lefttime', parseInt(_this.innerHTML));
_this.innerHTML = 'loading...';
}
scope.countdown(container, theme, cb);
},
countdown:function(container, theme, cb){
var scope = this; scope.offset = new Date().getTime() - (scope.startTime + scope.count * scope.interval);
scope.next_time = scope.interval - scope.offset; if(scope.countdown_timer) window.clearTimeout(scope.countdown_timer);
scope.countdown_timer = window.setTimeout(function(){
for(var i=0,len=container.length; i<len; i++){
var obj = container[i];
var lefttime = obj.getAttribute('data-lefttime');
lefttime--;
obj.setAttribute('data-lefttime', lefttime); if(lefttime==0){
// 回调
if($) obj = $(obj);
cb(obj);
}else if(lefttime<0){
// code
}else{
scope.day = Math.floor(lefttime / scope.oneday);//还有几天
scope.hour = Math.floor((lefttime - scope.day * scope.oneday) / 3600);//还有几小时
scope.minute = Math.floor((lefttime - scope.day * scope.oneday - 3600 * scope.hour) / 60);//还有几小时
scope.second = lefttime - scope.day * scope.oneday - 3600 * scope.hour - 60 * scope.minute;//还有几秒 if(scope.show_day==false) scope.hour += scope.day*24;
if(scope.show_hour==false) scope.minute += scope.hour*60;
if(scope.show_minute==false) scope.second += scope.minute*60; scope.str = '';
scope.str = theme.replace('D', scope.day);
scope.str = scope.str.replace('H', scope.hour);
scope.str = scope.str.replace('M', scope.minute);
scope.str = scope.str.replace('S', scope.second);
obj.innerHTML = scope.str;
}
} scope.count++; scope.countdown(container, theme, cb);
}, scope.next_time);
}
};

Git 地址:https://github.com/Tiacx/leftTimer.js

JS精准倒计时(支持自定义模板)的更多相关文章

  1. ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...

  2. ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制

    ASP.NET  mvc的razor视图引擎是一个非常好的.NET  MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...

  3. 倒计时的js实现 倒计时 js Jquery

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...

  4. .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(三)

    阅读目录: 7.HtmlHelper.HtmlHelper<T>中的ViewModel的类型推断 8.控制ViewModel中的某个属性的呈现(使用PartialView部分视图细粒度控制 ...

  5. 使用requireJS,backboneJS,和underscoreJS完成自定义模板封装

    使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...

  6. SharePoint 2013 自定义模板页后在列表里修改不了视图

    前言 最近系统从2010升级至2013,有自定义模板页.突然发现在列表中切换不了视图,让我很费解. 我尝试过以下解决方案: 去掉自定义css 去掉自定义js 禁用所有自定义功能 结果都没有效还是一样的 ...

  7. SublimeText插件Emmet的自定义模板

    在前端界,作为快速生成代码的Emmet插件相当给力.最近在学bootstrap,需要频繁生成html头文件,我就想着自定义模板.国内只有基础教程,只好自己读英文文档了. Emmet国内基础教程地址: ...

  8. .NET/ASP.NETMVC Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(一)

    .NET/ASP.NETMVC Model元数据.HtmlHelper.自定义模板.模板的装饰者模式(一) 阅读目录: 1.开篇介绍 2.Model与View的使用关系(数据上下文DataContex ...

  9. 前端学PHP之自定义模板引擎

    前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构 ...

随机推荐

  1. 【网站seo优化】SEO优化每天的工作内容是什么?

    [网站seo优化]SEO优化每天的工作内容是什么?从未知的领域来到seo,感到搜索引擎无比神奇,接触seo久了,有每天必做的工作内容,大量的seo从业者,每天的工作内容大同小异,主要做的工作有通过相应 ...

  2. firefox镜像 和geckodriver驱动大全

    最近学习Selenium,下载资源很难,还好找到了一个网站,转载的https://blog.csdn.net/cyjs1988/article/details/73039423,收下了,以便以后学习使 ...

  3. 【转】SQL Server 事务隔离级别详解

    SQL 事务隔离级别 概述 隔离级别用于决定如果控制并发用户如何读写数据的操作,同时对性能也有一定的影响作用. 步骤 事务隔离级别通过影响读操作来间接地影响写操作:可以在回话级别上设置事务隔离级别也可 ...

  4. [asp.net core]The requested page cannot be accessed because the related configuration data for the page is invalid.

    bug HTTP Error 500.19 - Internal Server Error The requested page cannot be accessed because the rela ...

  5. Canvas 和 SVG 的不同

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  6. Android: Android Studio签名打包的两种方式(zz)

    注:给我们自己开发的app签名,就代表着我自己的版权,以后要进行升级,也必须要使用相同的签名才行.签名就代表着自己的身份(即keystore),多个app可以使用同一个签名. 如果不知道签名是啥意思, ...

  7. Spark2.2出现异常:ERROR SparkUI: Failed to bind SparkUI

    详细错误信息如下: // :: INFO util.log: Logging initialized @5402ms // :: INFO server.Server: jetty-9.3.z-SNA ...

  8. Windows上的字符转换之CP_ACP和CP_OEMCP

    原文地址:http://blog.sina.com.cn/s/blog_53c1950a010158mw.html Windows API函数MultiByteToWideChar用于多字节编码字符串 ...

  9. docker的常用命令汇总

    1================================================================================ docker 列出每个容器的IP   ...

  10. [Python设计模式] 第26章 千人千面,内在共享——享元模式

    github地址:https://github.com/cheesezh/python_design_patterns 背景 有6个客户想做产品展示网站,其中3个想做成天猫商城那样的"电商风 ...