github html倒计时器,基于jQuery和bootstrap4进度条的计时器插件

这是一款基于jQuery和bootstrap4进度条的计时器插件。该插件通过bootstrap4的进度条来显示计时的进度，并提供倒计时结束后的回调函数。

使用方法

在页面中引入jQuery、bootstrap4相关文件，以及jquery.progressBarTimer.min.js文件。

HTML结构

TourJS 使用一个块级元素作为倒计时器的容器。

初始化插件

然后在页面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：倒计时结束后的回调函数。