欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 日期时间选择器 > 基于jQuery和bootstrap4进度条的计时器插件

基于jQuery和bootstrap4进度条的计时器插件

基于jQuery和bootstrap4进度条的计时器插件

关键词:计时器,bootstrap,bootstrap4,jquery倒计时插件,jquery倒计时,jquery倒计时器,jquery库,riqi

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

简要教程

这是一款基于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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_riqi/9195.html

 在线演示  免费下载
编号:201808070000009195
大小:0.07MB
上传时间:2018-09-09 08:01
素材由用户"13554619424"上传分享。

标签

最新推荐素材

与基于jQuery和bootstrap4进度条的计时器插件相关的素材

.