利用moment为基础,基于DOM实现一个多个倒计时同时进行的js库方便使用
2017-01-19 20:50
453 查看
moment非常强大,提供了很多时间方法的封装,项目需要一个小倒计时的功能,网上找了很多不合适,决定自己写一个,直接上代码
用法:
html页面首先要引入moment才能使用我上面的方法
假设HTML里要放入倒计时的地方在这里
页面上可以写js:
看官们外观可以修改上述代码去做出你自己的风格,以上内容包含一些JS的特性,有很多新手对JS不熟不了解一些JS的机制例如原型链\this指针\作用域等等这些,这也是给新手们一个很好的学习范例
//定义一个立即执行的函数 (function () { var Ticts=function Ticts() { this.ticts = {}; }; Ticts.prototype.createTicts=function(id, dealline) { var ticts=this; var time=moment(dealline).diff(moment()); var _ticts=this.ticts[id] = { dealine: dealline , id: id , time: time , interval: setInterval(function () { var t = null; var d = null; var h = null; var m = null; var s = null; //js默认时间戳为毫秒,需要转化成秒 t = _ticts.time / 1000; d = Math.floor(t / (24 * 3600)); h = Math.floor((t - 24 * 3600 * d) / 3600); m = Math.floor((t - 24 * 3600 * d - h * 3600) / 60); s = Math.floor((t - 24 * 3600 * d - h * 3600 - m * 60)); //这里可以做一个格式化的处理,甚至做毫秒级的页面渲染,基于DOM操作,太多个倒计时一起会导致页面性能下降 document.getElementById(id).innerHTML = d + '天' + h + '小时' + m + '分钟' + s + '秒'; _ticts.time -= 1000; if (_ticts.time < 0) ticts.deleteTicts(id);//判断是否到期,到期后自动删除定时器 }, 1000) } }; Ticts.prototype.deleteTicts = function(id) { clearInterval(this.ticts[id].interval);//清楚定时器的方法,需要定时器的指针作为参数传入clearInterval delete this.ticts[id];//通过delete的方法删除对象中的属性 }; //新建一个ticts对象,放到window全局函数中,那么在html页面是(或者其他js文件)可以访问该对象 window.Ticts=new Ticts(); })();
用法:
html页面首先要引入moment才能使用我上面的方法
<script src="//cdn.bootcss.com/moment.js/2.17.1/moment.min.js"></script>
假设HTML里要放入倒计时的地方在这里
<div id="aaa"></div> <div id="aaa1"></div> <div id="aaa2"></div>
页面上可以写js:
Ticts.createTicts("aaa","2017-1-20 20:20:20"); Ticts.createTicts("aaa1","2017-1-22 20:20:20"); Ticts.createTicts("aaa2","2017-1-23 20:20:20");
看官们外观可以修改上述代码去做出你自己的风格,以上内容包含一些JS的特性,有很多新手对JS不熟不了解一些JS的机制例如原型链\this指针\作用域等等这些,这也是给新手们一个很好的学习范例
相关文章推荐
- 基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- 利用JS进行省市选择的实现
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-实现字典的打印
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-通过SQL实现特殊业务
- 一个流行且实用的JS表单验证提示,演示了怎么自定义错误信息的显示方式,同时通过写FormValid.showError类方法来实现错误显示方式自定义: errMsg 是一个错误消息的数组,这样方便自定
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-WinForm应用篇-演示ORM对象与DataGridView的绑定技术-商品字典的另一个实现
- js混淆代码还原-js反混淆:利用js进行赋值实现
- JS中利用dom实现追加与插入
- SPCAMLEditor使用系列(3)--利用SPCamlEditor实现 时间字段跟当前时间进行实时比较计算
- 基于js利用经纬度进行两地的距离计算
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- jquery imgareaselect 使用利用js与程序结合实现图片剪切
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-通过SQL实现特殊业务
- 一步一步教你使用AgileEAS.NET基础类库进行应用开发-基础篇-基于接口驱动的数据层
- 个人安卓学习笔记---分别利用SAX、DOM和Pull实现对XML文件的解析并进行单元测试
- 利用SAX、DOM和Pull实现对schools.xml的解析并进行单元测试