当前位置：首页 > 网页特效 > 日期和时间

简单漂亮的jQuery计时器插件

分类：日期和时间日期：2024-05-14 点击(0) 评论(0)

简单漂亮的jQuery计时器插件

简介

该计时器插件的计时功能依赖于jquery-runner插件。

```html
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-runner.js"></script>  
```              
#####  HTML结构
DEMO中的计时器代码的HTML结构使用Bootstrap来进行布局，其结构如下：

```html
<div class="container-fluid">
  <div class="col-xs-12 fill">
    <span id="runner"></span><br><br>
    <div class="col-sm-10 col-sm-offset-2">
      <div class="col-xs-4 col-sm-3 centered"><button id="stopBtn"></button></div>
      <div class="col-xs-4 col-sm-3 centered"><button id="startBtn"></button></div>
      <div class="col-xs-4 col-sm-3 centered"><button id="resetBtn"></button></div>
    </div>
  </div>
</div>         
```     
#####  初始化插件
在页面DOM元素初始化完毕之后，可以通过下面的方法来初始化该计时器插件。

```html
$('#runner').runner({
 
milliseconds: false,
format: function millisecondsToString(milliseconds) {
      var oneHour = 3600000;
      var oneMinute = 60000;
      var oneSecond = 1000;
      var seconds = 0;
      var minutes = 0;
      var hours = 0;
      var result;
 
      if (milliseconds >= oneHour) {
          hours = Math.floor(milliseconds / oneHour);
      }
 
      milliseconds = hours > 0 ? (milliseconds - hours * oneHour) : milliseconds;
 
      if (milliseconds >= oneMinute) {
          minutes = Math.floor(milliseconds / oneMinute);
      }
 
      milliseconds = minutes > 0 ? (milliseconds - minutes * oneMinute) : milliseconds;
 
      if (milliseconds >= oneSecond) {
          seconds = Math.floor(milliseconds / oneSecond);
      }
 
      milliseconds = seconds > 0 ? (milliseconds - seconds * oneSecond) : milliseconds;
 
      if (hours > 0) {
          result = (hours > 9 ? hours : "0" + hours) + ":";
      } else {
          result = "00:";
      }
 
      if (minutes > 0) {
          result += (minutes > 9 ? minutes : "0" + minutes) + ":";
      } else {
          result += "00:";
      }
 
      if (seconds > 0) {
          result += (seconds > 9 ? seconds : "0" + seconds);
      } else {
          result += "00";
      }
      
      return result;
    }  
});              
```
开始计时按钮、停止计时按钮和重置按钮分别要添加相应的方法，以及在点击的时候添加和移除相应的class类。

```html
$('#startBtn').click(function() {
    $('#runner').runner('start');
    $(this).addClass('activeBtn');
    $('#stopBtn').removeClass('activeBtn');
});
 
$('#stopBtn').click(function() {
    $('#runner').runner('stop');
    $(this).addClass('activeBtn');
    $('#startBtn').removeClass('activeBtn');
});
 
$('#resetBtn').click(function() {
    $('#runner').runner('reset');
    $('#stopBtn').removeClass('activeBtn');
    $('#startBtn').removeClass('activeBtn');
});     
```

web299.com

简单漂亮的jQuery计时器插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果