当前位置：首页 > jquery

jquery 计时器

2026-03-16 13:28:52jquery

jQuery 计时器实现方法

使用 jQuery 实现计时器功能可以通过多种方式完成，以下是几种常见的实现方法：

使用 `setInterval` 实现计时器

通过 JavaScript 原生函数 setInterval 结合 jQuery 操作 DOM 元素实现计时功能。

var seconds = 0;
var timer = setInterval(function() {
    seconds++;
    $('#timer').text('已运行: ' + seconds + ' 秒');
}, 1000);

// 停止计时器
$('#stop').click(function() {
    clearInterval(timer);
});

使用 jQuery 动画实现计时器

利用 jQuery 的 animate() 方法实现带有动画效果的计时器。

jquery 计时器

var time = 0;
function updateTimer() {
    time++;
    $('#timer').text(time);
    setTimeout(updateTimer, 1000);
}
updateTimer();

倒计时实现

实现一个从指定时间开始倒计时的功能。

var countdown = 60;
var timer = setInterval(function() {
    countdown--;
    $('#countdown').text(countdown);
    if (countdown <= 0) {
        clearInterval(timer);
        $('#countdown').text('时间到!');
    }
}, 1000);

格式化显示时间

将秒数格式化为更易读的 HH:MM:SS 格式。

jquery 计时器

function formatTime(seconds) {
    var hours = Math.floor(seconds / 3600);
    var minutes = Math.floor((seconds % 3600) / 60);
    var secs = seconds % 60;
    return (hours < 10 ? "0" : "") + hours + ":" + 
           (minutes < 10 ? "0" : "") + minutes + ":" + 
           (secs < 10 ? "0" : "") + secs;
}

var totalSeconds = 0;
setInterval(function() {
    totalSeconds++;
    $('#formattedTimer').text(formatTime(totalSeconds));
}, 1000);

暂停和继续功能

实现可以暂停和继续的计时器。

var timer;
var isRunning = false;
var seconds = 0;

function startTimer() {
    if (!isRunning) {
        isRunning = true;
        timer = setInterval(function() {
            seconds++;
            $('#timer').text(seconds);
        }, 1000);
    }
}

function pauseTimer() {
    clearInterval(timer);
    isRunning = false;
}

$('#start').click(startTimer);
$('#pause').click(pauseTimer);

使用 Date 对象实现高精度计时

对于需要更高精度的计时，可以使用 Date 对象来计算时间差。

var startTime;
var timer;

function startHighResTimer() {
    startTime = new Date();
    timer = setInterval(function() {
        var currentTime = new Date();
        var elapsed = (currentTime - startTime) / 1000;
        $('#highResTimer').text(elapsed.toFixed(3) + ' 秒');
    }, 10);
}

function stopHighResTimer() {
    clearInterval(timer);
}

这些方法涵盖了从简单到复杂的各种计时器实现需求，可以根据具体场景选择合适的方式。