JavaScript使用小插件实现倒计时的方法讲解
程序员文章站
2022-05-04 19:07:12
countdown.js
一个用来实现简单页面倒计时的轻量级工具
api
countdown.opentimecountbyseconds()根据要计时的秒数打开一个...
countdown.js
一个用来实现简单页面倒计时的轻量级工具
api
countdown.opentimecountbyseconds()
根据要计时的秒数打开一个显示剩余时间的倒计时
参数:
- ele: 放置倒计时的元素
- countdownseconds: 要计时的秒数
- sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
- divider: 分割时分秒的分割符
- endfunc: 倒计时结束时执行的方法
ps:以上均为可选参数
示例
countdown.opentimecountbyseconds({ ele: document.getelementbyid('h1'), countdownseconds: 3600, sign: 'flypie', divider: ':', endfunc: function () { console.log('end'); } });
countdown.opentimecountbystartandenddate()
根据计时开始和结束时间打开一个显示剩余时间的倒计时
参数:
- ele: 放置倒计时的元素
- startdate: 倒计时开始时间 (date类型)
- enddate: 倒计时结束时间 (date类型)
- sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
- divider: 分割时分秒的分割符
- endfunc: 倒计时结束时执行的方法
ps:除startdate,enddate外均为可选参数
示例
var startdate = new date(); var enddate = new date(); enddate.setdate(enddate.getdate()+1); countdown.opentimecountbystartandenddate({ ele: document.getelementbyid('h1'), startdate: startdate, enddate: enddate, sign: 'flypie', divider: ':', endfunc: function () { console.log('end'); } });
countdown.opentimecountbystartandenddate()
根据计时开始和结束时间打开一个显示剩余天数加时间的倒计时
参数:
- ele: 放置倒计时的元素
- startdate: 倒计时开始时间 (date类型)
- enddate: 倒计时结束时间 (date类型)
- sign: 用于给倒计时设置标记 (可以给多个倒计时设置同一个标记)
- divider: 分割时分秒的分割符
- datedivider: 天数和时间之间的分隔符
- endfunc: 倒计时结束时执行的方法
ps:除startdate,enddate外均为可选参数
示例
var startdate = new date(); var enddate = new date(); enddate.setdate(enddate.getdate()+10); countdown.opendateandtimecountbystartandenddate({ ele: document.getelementbyid('h1'), startdate: startdate, enddate: enddate, sign: 'flypie', divider: ':', datedivider: '天 ', endfunc: function () { console.log('end'); } });
countdown.stopbysign()
根据标记零时暂停一个倒计时
countdown.stopbysign('flypie');
countdown.resumebysign()
根据标记恢复一个被零时暂停的倒计时
countdown.resumebysign('flypie');
countdown.closebysign()
根据标记永久性地关闭一个倒计时
countdown.closebysign('flypie');
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
推荐阅读
-
Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
-
C#结合JavaScript实现秒杀倒计时的方法
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
-
C#结合JavaScript实现秒杀倒计时的方法
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
-
微信小程序中使用echarts的实现方法
-
讲解JavaScript中for...in语句的使用方法
-
使用JavaScript实现node.js中的path.join方法
-
JavaScript使用原型和原型链实现对象继承的方法详解