这是一款基于jQuery和bootstrap4进度条的计时器插件。该插件通过bootstrap4的进度条来显示计时的进度,并提供倒计时结束后的回调函数。
使用方法
在页面中引入jQuery、bootstrap4相关文件,以及jquery.progressBarTimer.min.js文件。
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-min.css" /> <script type="text/javascript" src="assets/js/jquery.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script type="text/javascript" src="assets/js/jquery.progressBarTimer.min.js"></script>
HTML结构
TourJS 使用一个块级元素作为倒计时器的容器。
<div id="countdown"></div>
初始化插件
然后在页面DOM元素加载完毕之后,通过下面的方法来初始化该倒计时器插件。
$("#countdown").progressBarTimer({ timeLimit: 60, warningThreshold: 5, autostart: false, onFinish : function () { console.log('completed') } }).start()
配置参数
该倒计时器插件的可用配置参数如下:
{ timeLimit: 60, //total number of seconds warningThreshold: 5, //seconds remaining triggering switch to warning color autoStart: true, // start the countdown automatically onFinish: function() {}, //invoked once the timer expires baseStyle: '', //bootstrap progress bar style at the beginning of the timer warningStyle: 'bg-danger', //bootstrap progress bar style in the warning phase smooth: false, // should the timer be smooth or stepping completeStyle: 'bg-success' //bootstrap progress bar style at completion of timer }
方法
该倒计时器插件的可用方法和回调函数如下:
-
.start()
:开始倒计时。 -
.stop()
:结束倒计时,onComplete
方法不会被执行。 -
.extendTimer(secs)
:延长当前的倒计时时间。 -
.addSeconds(secs)
:在原有倒计时时间的基础上增加时间,如果startOverAfterAdding
设置为true,则重新开始倒计时。 -
onComplete
:倒计时结束后的回调函数。
该倒计时器插件的的github地址为:https://github.com/imalliar/jquery.progressBarTimer
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!