jquery 计时器
jQuery 计时器实现方法
使用 jQuery 实现计时器功能可以通过多种方式完成，以下是几种常见的方法：
方法一：使用 setInterval 实现倒计时
var count = 10; // 初始计数值
var timer = setInterval(function() {
count--;
$('#timer').text(count); // 更新显示
if (count <= 0) {
clearInterval(timer); // 停止计时器
alert('时间到！');
}
}, 1000); // 每秒执行一次方法二：实现秒表功能
var seconds = 0;
var timer;
$('#start').click(function() {
timer = setInterval(function() {
seconds++;
$('#stopwatch').text(seconds + '秒');
}, 1000);
});
$('#stop').click(function() {
clearInterval(timer);
});
$('#reset').click(function() {
clearInterval(timer);
seconds = 0;
$('#stopwatch').text('0秒');
});方法三：使用 jQuery 动画实现视觉计时效果
var duration = 5000; // 5秒
$('#progress-bar').animate({
width: '100%'
}, duration, 'linear');注意事项
- 使用
setInterval时要注意清除计时器，避免内存泄漏 - 长时间运行的计时器可能会因为浏览器标签页休眠而变得不准确
- 对于高精度计时需求，建议使用
performance.now()而不是Date.now()
高级应用示例
带暂停/继续功能的计时器
var timer;
var remaining = 300; // 5分钟
var isRunning = false;
function updateDisplay() {
var mins = Math.floor(remaining / 60);
var secs = remaining % 60;
$('#countdown').text(mins + ':' + (secs < 10 ? '0' : '') + secs);
}
$('#toggle').click(function() {
if (isRunning) {
clearInterval(timer);
isRunning = false;
$(this).text('继续');
} else {
timer = setInterval(function() {
remaining--;
updateDisplay();
if (remaining <= 0) {
clearInterval(timer);
alert('计时结束');
}
}, 1000);
isRunning = true;
$(this).text('暂停');
}
});这些方法可以根据具体需求进行调整和组合，实现各种计时器功能。
