/**
* 倒计时 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. JAVA中使用LOG4J记录日志(转)

    在项目开发中,记录错误日志是一个很有必要功能.一是方便调试:二是便于发现系统运行过程中的错误:三是存储业务数据,便于后期分析: 在java中,记录日志,有很多种方式. 比如,自己实现. 自己写类,将日 ...

  2. Vue(十九)Vuex

    Vuex 1. 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说,用来集中管 ...

  3. Drools(BRMS) 速成教程(上)

    大家在日常开发中,肯定遇到过一些业务规则变来变去的需求,比如:会员积分系统(今天要新注册会员送10积分,明天要改成注册送优惠券,后天搞活动要改成注册自动变成高级会员...),此类需求,一般都是通过写i ...

  4. Windows远程桌面(mstsc)不能复制粘贴的解决办法

    原来通过mstsc远程连接Windows能够直接在本地和服务器之间复制.粘贴一些文字和文件,最近突然无法直接复制粘贴了,只能通过远程映射的本地磁盘方式交换文件,太为繁琐. 已经确认远程桌面连接选项“本 ...

  5. sqoop导出到hdfs

    ./sqoop export --connect jdbc:mysql://192.168.58.180/db --username root --password 123456  --export- ...

  6. iOS链接库的冲突

    最近在打包的时候,遇到一个坑.特此记录一下 起因是发现 Unity 5.4 版本,使用c#写的下载,下载速度无法突破 2M/s,同样的网络,后来横向对比使用原来 Cocos2d 开始的游戏,可以达到 ...

  7. ubuntu redis 自启动配置文件(关机有密码)

    #!/bin/bash # chkconfig : ### BEGIN INIT INFO # Provides: redis-server # Required-Start: $syslog $re ...

  8. postgresql中使用distinct去重

    select语法 [ WITH [ RECURSIVE ] with_query [, ...] ] SELECT [ ALL | DISTINCT [ ON ( expression [, ...] ...

  9. ThunderBird对只有回复地址的邮件过滤

    回复地址,其实就是reply-to 增加一个自定义的字段:reply-to即可

  10. PHP知识梳理

      前端 HTML.CSS. JS(DOM操作.事件操作).Jquery(选择器.属性/值操作.事件操作).ajax PHP基础 变量(类型.类型转换) 常量(系统.自定义) 运算(算术.字符串.赋值 ...