当前位置：首页 > jquery

jquery 计时器

2026-02-03 17:15:18jquery

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('暂停');
    }
});

这些方法可以根据具体需求进行调整和组合，实现各种计时器功能。

jquery 计时器