/**
* 倒计时 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. layer.load的使用

    在ajax请求和回调返回的过程中,我们一般都要用到layer.load这个方法 例如: //loading层 var index = layer.load(1, { shade: [0.1,'#fff ...

  2. NodeJS 模块&函数

    NodeJS 模块&函数 nodejs的多文件操作通过模块系统实现,模块和文件一一对应.文件本身可以是javascript代码.JSON或编译过的C/C++扩展 基本用法 nodeJS通过ex ...

  3. 生成Area URL链接

    关于Area的URL链接生成,可以分为这么三种情况:第一种是在当前Area生成指向当前Area的链接:第二种是生成指向其他Area的链接:第三种是在某个Area中生成指向根目录的链接.下面是这三种情况 ...

  4. vue使用element-ui的el-input监听不了回车事件

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" plac ...

  5. oracle 10g 11g 12c区别

    oracle 10g 11g 12c区别

  6. django之模型层(model)--建表、查询、删除基础

    要说一个项目最重要的部分是什么那铁定数据了,也就是数据库,这篇就开始带大家走进django关于模型层model的使用,model主要就是操纵数据库不使用sql语句的情况下完成数据库的增删改查.本篇仅带 ...

  7. 【linux】linux下准确查询正在tomcat下运行的java进程。准确获取正在运行的java进程的PID

    准确获取定位到tomcat下正在运行的java进程的PID命令: ps -ef|grep java | grep catalina | awk '{print $2}' 准确定位到tomcat下正在运 ...

  8. netty中的ChannelHandler和ChannelPipeline

    netty中的ChannelHandler和ChannelPipeline ChannelHandler 家族 https://www.w3cschool.cn/essential_netty_in_ ...

  9. [STF手机设备管理平台]连接其它操作系统上的安卓设备实操介绍

    一.背景 看到之前曾有人发贴,贴名[stf 连接各操作系统上安卓设备的操作方法分享],介绍了一下,虽然说方法和理论都有,但下述评论中还是有很多人不知如何操作,特别是不知道stf provider命令如 ...

  10. python数据分析实用小抄

    1. python数据分析基础 2. numpy 3. Scikit-Learn 4. Bokeh 5. Scipy 6. Pandas   转载于:http://www.jianshu.com/p/ ...