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 计时器实现方案，可以根据具体需求选择合适的实现方式。