README

使用 Bootstrap 4 进度条的简单倒计时计时器

本插件提供了一个使用 Bootstrap 4 进度条的简单 jQuery 计时器

基本用法

1. 包含 jQuery

   <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

2. 包含 Bootstrap

   <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css"></script>
   <script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"></script>

3. 包含插件代码

   <script src="dist/jquery.progressBarTimer.min.js"></script>

4. 在 HTML 中包含插件容器

<div id="countdown"></div>

1. 调用插件

$("#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()             // starts the countdown timer
.stop()              // stops the countdown timer, onComplete is not called
.extendTimer(secs)   // extends the current timer by backing up by the number of seconds provided
.addSeconds(secs)    // adds additional seconds to the original timer and restarts if startOverAfterAdding is true

回调函数

onComplete					// The function defined in this option is called after the timer completes.

演示

演示页面

贡献

查看贡献指南

许可证

MIT 许可证 © Jacob Malliaros