当前位置：首页 > jquery

jquery计时器

2026-04-08 13:15:13jquery

jQuery 计时器实现方法

使用 jQuery 实现计时器可以通过 setInterval 或 setTimeout 结合 DOM 操作完成。以下是几种常见场景的实现方式。

基础倒计时器

通过 setInterval 实现一个从指定时间开始的倒计时功能，更新显示在页面上。

var count = 10; // 初始秒数
var timer = setInterval(function() {
    $('#timer').text(count); // 更新显示
    count--;
    if (count < 0) {
        clearInterval(timer); // 停止计时器
        $('#timer').text('时间到！');
    }
}, 1000); // 间隔1秒

动态开始/暂停计时器

通过按钮控制计时器的启动和暂停，适用于需要用户交互的场景。

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

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

$('#pauseBtn').click(function() {
    clearInterval(timer);
    isRunning = false;
});

格式化时间显示

将秒数转换为 HH:MM:SS 格式，适用于需要友好时间展示的场景。

function formatTime(seconds) {
    var hours = Math.floor(seconds / 3600);
    var minutes = Math.floor((seconds % 3600) / 60);
    var secs = seconds % 60;
    return [hours, minutes, secs].map(v => v.toString().padStart(2, '0')).join(':');
}

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

页面停留时间统计

统计用户在页面停留的时长，离开页面时通过 beforeunload 事件上报数据。

jquery计时器

var startTime = new Date();
$(window).on('beforeunload', function() {
    var endTime = new Date();
    var stayTime = (endTime - startTime) / 1000; // 转换为秒
    // 发送数据到服务器（示例使用AJAX）
    $.post('/track', { duration: stayTime });
});