html选择计时器框架,简单漂亮的jQuery计时器插件

Jquery-Stylish-Timer是一款简单漂亮的jQuery计时器插件。该计时器插件可以实现秒、分钟和小时的计时功能，并带有开始、暂停和重新开始计时的按钮功能。

使用方法

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

HTML结构

DEMO中的计时器代码的HTML结构使用Bootstrap来进行布局，其结构如下：

初始化插件

在页面DOM元素初始化完毕之后，可以通过下面的方法来初始化该计时器插件。

$('#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类。

$('#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');

});