/**
* 倒计时 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. websocket是什么

    websocket是什么? 这是知乎上面一个作者写的一篇风趣幽默又容易理解关于 websocket 的文章. 提供一下连接地址:https://www.zhihu.com/question/20215 ...

  2. PAT-Top1001. Battle Over Cities - Hard Version (35)

    在敌人占领之前由城市和公路构成的图是连通图.在敌人占领某个城市之后所有通往这个城市的公路就会被破坏,接下来可能需要修复一些其他被毁坏的公路使得剩下的城市能够互通.修复的代价越大,意味着这个城市越重要. ...

  3. Alpha冲刺(4/10)——2019.4.27

    所属课程 软件工程1916|W(福州大学) 作业要求 Alpha冲刺(4/10)--2019.4.27 团队名称 待就业六人组 1.团队信息 团队名称:待就业六人组 团队描述:同舟共济扬帆起,乘风破浪 ...

  4. Vue(十六)vue-router路由

    一. vue-router路由   1. 简介 使用Vue.js开发SPA(Single Page Application)单页面应用 根据不同url地址,显示不同的内容,但显示在同一个页面中,称为单 ...

  5. Docker 常用命令(二)

    4. 查看Docker镜像创建历史: docker history flaskhello 3. Docker提交镜像 docker build -t flaskhello . docker run - ...

  6. poj3280 Cheapest Palindrome(回文串区间dp)

    https://vjudge.net/problem/POJ-3280 猛刷简单dp第一天第三题. 这个据说是[求字符串通过增减操作变成回文串的最小改动次数]的变体. 首先增减操作的实质是一样的,所以 ...

  7. django之ORM补充

    本篇导航: QuerySet 中介模型 查询优化 extra 一.QuerySet 1.可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句 ...

  8. 4、css属性操作

    前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 本篇导航: css text 背景属性 边框属性 列表属性 dispaly属性 外边距(margine)和内边距(paddin ...

  9. 首席技术官应该考虑的网络安全问题 IT大咖说 - 大咖干货,不再错过

    首席技术官应该考虑的网络安全问题 IT大咖说 - 大咖干货,不再错过   http://www.itdks.com/dakalive/detail/5523

  10. 关于 IIS7.0下文件写入无权限的解决办法

    1. 在IIS Web站点上右键 --> 编辑权限 2. 在弹出的窗体上选择[安全]选项卡,如图: 3. 在安全选项卡中点击[编辑]按钮,弹出如图对话框: 4. 点击[添加]按钮,弹出如图对话框 ...