基于jQuery和bootstrap4进度条的计时器插件
源码介绍
这是一款基于jQuery和bootstrap4进度条的计时器插件。该插件通过bootstrap4的进度条来显示计时的进度,并提供倒计时结束后的回调函数。 在页面中引入jQuery、bootstrap4相关文件,以及jquery.progressBarTimer.min.js文件。 TourJS 使用一个块级元素作为倒计时器的容器。 然后在页面DOM元素加载完毕之后,通过下面的方法来初始化该倒计时器插件。 该倒计时器插件的可用配置参数如下: 该倒计时器插件的可用方法和回调函数如下: 该倒计时器插件的的github地址为:https://github.com/imalliar/jquery.progressBarTimer简要教程
使用方法
<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结构
<div id="countdown"></div>
初始化插件
$("#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
:倒计时结束后的回调函数。
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 基于jQuery和bootstrap4进度条的计时器插件
发表评论 取消回复