JS精准倒计时(支持自定义模板)
/**
* 倒计时 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精准倒计时(支持自定义模板)的更多相关文章
- ASP.NET MVC扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的项目支 ...
- ASP.NET MVC 扩展自定义视图引擎支持多模板&动态换肤skins机制
ASP.NET mvc的razor视图引擎是一个非常好的.NET MVC 框架内置的视图引擎.一般情况我们使用.NET MVC框架为我们提供的这个Razor视图引擎就足够了.但是有时我们想在我们的 ...
- 倒计时的js实现 倒计时 js Jquery
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=987 一.如火如荼的团 ...
- .NET/ASP.NETMVC 深入剖析 Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(三)
阅读目录: 7.HtmlHelper.HtmlHelper<T>中的ViewModel的类型推断 8.控制ViewModel中的某个属性的呈现(使用PartialView部分视图细粒度控制 ...
- 使用requireJS,backboneJS,和underscoreJS完成自定义模板封装
使用requireJS,backboneJS,和underscoreJS完成自定义模板封装 原来的代码 当我们进行一个列表的数据填充的时候,是这样做的: //获取美食列表 function getFo ...
- SharePoint 2013 自定义模板页后在列表里修改不了视图
前言 最近系统从2010升级至2013,有自定义模板页.突然发现在列表中切换不了视图,让我很费解. 我尝试过以下解决方案: 去掉自定义css 去掉自定义js 禁用所有自定义功能 结果都没有效还是一样的 ...
- SublimeText插件Emmet的自定义模板
在前端界,作为快速生成代码的Emmet插件相当给力.最近在学bootstrap,需要频繁生成html头文件,我就想着自定义模板.国内只有基础教程,只好自己读英文文档了. Emmet国内基础教程地址: ...
- .NET/ASP.NETMVC Model元数据、HtmlHelper、自定义模板、模板的装饰者模式(一)
.NET/ASP.NETMVC Model元数据.HtmlHelper.自定义模板.模板的装饰者模式(一) 阅读目录: 1.开篇介绍 2.Model与View的使用关系(数据上下文DataContex ...
- 前端学PHP之自定义模板引擎
前面的话 在大多数的项目组中,开发一个Web程序都会出现这样的流程:计划文档提交之后,前端工程师制作了网站的外观模型,然后把它交给后端工程师,它们使用后端代码实现程序逻辑,同时使用外观模型做成基本架构 ...
随机推荐
- day8网络编程,面向对象1
一.只是回顾 1.导入模块的顺序,首先从当前目录下找,再从环境变量里面找,使用"sys.path.insert(0,'需要导入的环境变量')"加入需要导入文件的环境变量; 2.如果 ...
- google 地址
http://ec2-54-250-200-50.ap-northeast-1.compute.amazonaws.com/ http://www.joesauve.com/async-dapper- ...
- OpenXC : Any updates on plans for IOS?
OpenXC : Any updates on plans for IOS? Hi Thomas, We're actively investigating this as we'd love to ...
- C#隐藏手机号中间四位为*
使用正则:Regex.Replace(手机号, "(\\d{3})\\d{4}(\\d{4})", "$1****$2"); 效果:
- 02、创建RDD(集合、本地文件、HDFS文件)
Spark Core提供了三种创建RDD的方式,包括:使用程序中的集合创建RDD:使用本地文件创建RDD:使用HDFS文件创建RDD. 1.并行化集合 如果要通过并行化集合来创建RDD,需要针对程序中 ...
- 转: linux centos7 下安装maven
转: https://www.tecmint.com/install-apache-maven-on-centos-7/
- MFC中使用ATL报错:error C4430: missing type specifier - int assumed. Note: C++ does not support default-int
我在MFC中使用ATL函数A2W的时候报如下的错误: error C4430: missing type specifier - int assumed. Note: C++ does not sup ...
- MySQL中的isnull、ifnull和nullif函数用法
isnull(expr) 如expr为null,那么isnull()的返回值为1,否则返回值为0. mysql>select isnull(1+1); ->0 mysql>selec ...
- IntelliJ IDEA给Serializable类加上自动的serialVersionUID
如题 见下图 设置以后,点击类,按Alt + Enter 自动加入的代码如下图
- CSS单行格式化与压缩
工具简介:CSS单行格式化与压缩工具