jquery 计时器
jQuery 计时器实现方法
使用 jQuery 实现计时器功能可以通过多种方式完成，以下是几种常见的方法：
使用 setInterval 实现计时器
通过 JavaScript 的 setInterval 方法结合 jQuery 操作 DOM 实现计时器功能：
var seconds = 0;
var timer;
function startTimer() {
timer = setInterval(function() {
seconds++;
$('#timer').text(seconds + ' 秒');
}, 1000);
}
function stopTimer() {
clearInterval(timer);
}
function resetTimer() {
clearInterval(timer);
seconds = 0;
$('#timer').text('0 秒');
}HTML 部分：
<div id="timer">0 秒</div>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="reset">重置</button>jQuery 事件绑定：
$(document).ready(function() {
$('#start').click(startTimer);
$('#stop').click(stopTimer);
$('#reset').click(resetTimer);
});使用 jQuery 插件实现计时器
jQuery 提供了多个计时器插件，如 jQuery Timer 插件：
// 引入 jQuery Timer 插件后
var timer = $.timer(function() {
$('#timer').text(timer.getTime());
}, 1000, true);
// 开始计时器
timer.play();
// 暂停计时器
timer.pause();
// 重置计时器
timer.reset();倒计时实现
实现一个简单的倒计时功能：
var count = 10;
var countdown = setInterval(function() {
$('#countdown').text(count);
count--;
if (count < 0) {
clearInterval(countdown);
$('#countdown').text('时间到！');
}
}, 1000);HTML 部分：
<div id="countdown">10</div>高性能计时器实现
对于需要更高精度的计时器，可以使用 requestAnimationFrame：
var startTime;
var elapsedTime = 0;
var timerActive = false;
function updateTimer(timestamp) {
if (!startTime) startTime = timestamp;
var delta = timestamp - startTime;
elapsedTime += delta;
startTime = timestamp;
$('#highres-timer').text((elapsedTime/1000).toFixed(3) + ' 秒');
if (timerActive) {
requestAnimationFrame(updateTimer);
}
}
$('#start-hires').click(function() {
timerActive = true;
startTime = null;
requestAnimationFrame(updateTimer);
});
$('#stop-hires').click(function() {
timerActive = false;
});格式化时间显示
添加时间格式化函数来美化显示：
function formatTime(seconds) {
var hrs = Math.floor(seconds / 3600);
var mins = Math.floor((seconds % 3600) / 60);
var secs = seconds % 60;
return (hrs > 0 ? hrs + ':' : '') +
(mins < 10 && hrs > 0 ? '0' : '') + mins + ':' +
(secs < 10 ? '0' : '') + secs;
}在计时器更新时调用：
$('#formatted-timer').text(formatTime(seconds));以上方法提供了从简单到高级的 jQuery 计时器实现方案，可以根据具体需求选择合适的实现方式。
