当前位置：首页 > JavaScript

js实现时钟计时

2026-03-01 19:32:58JavaScript

js实现时钟计时

使用JavaScript实现时钟计时

使用JavaScript可以轻松实现一个实时更新的时钟计时功能。以下是几种常见的方法：

js实现时钟计时

使用Date对象获取当前时间

function updateClock() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const timeString = `${hours}:${minutes}:${seconds}`;
    document.getElementById('clock').textContent = timeString;
}

// 初始调用
updateClock();
// 每秒更新一次
setInterval(updateClock, 1000);

使用requestAnimationFrame实现平滑动画

function smoothClock() {
    const clockElement = document.getElementById('clock');

    function update() {
        const now = new Date();
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');
        const milliseconds = now.getMilliseconds().toString().padStart(3, '0');
        clockElement.textContent = `${hours}:${minutes}:${seconds}.${milliseconds}`;
        requestAnimationFrame(update);
    }

    update();
}

smoothClock();

实现计时器功能

如果需要实现一个从特定时间开始计时的功能：

let startTime = Date.now();

function updateTimer() {
    const elapsed = Date.now() - startTime;
    const seconds = Math.floor(elapsed / 1000) % 60;
    const minutes = Math.floor(elapsed / (1000 * 60)) % 60;
    const hours = Math.floor(elapsed / (1000 * 60 * 60));

    const timeString = [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');

    document.getElementById('timer').textContent = timeString;
}

setInterval(updateTimer, 1000);

添加暂停和重置功能

let timerId;
let startTime;
let isRunning = false;
let accumulatedTime = 0;

function startStopwatch() {
    if (!isRunning) {
        startTime = Date.now();
        timerId = setInterval(updateStopwatch, 1000);
        isRunning = true;
    }
}

function pauseStopwatch() {
    if (isRunning) {
        clearInterval(timerId);
        accumulatedTime += Date.now() - startTime;
        isRunning = false;
    }
}

function resetStopwatch() {
    clearInterval(timerId);
    accumulatedTime = 0;
    isRunning = false;
    document.getElementById('stopwatch').textContent = '00:00:00';
}

function updateStopwatch() {
    const elapsed = accumulatedTime + (Date.now() - startTime);
    const seconds = Math.floor(elapsed / 1000) % 60;
    const minutes = Math.floor(elapsed / (1000 * 60)) % 60;
    const hours = Math.floor(elapsed / (1000 * 60 * 60));

    document.getElementById('stopwatch').textContent = [
        hours.toString().padStart(2, '0'),
        minutes.toString().padStart(2, '0'),
        seconds.toString().padStart(2, '0')
    ].join(':');
}

在HTML中使用

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Clock</title>
    <style>
        #clock {
            font-size: 48px;
            font-family: monospace;
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <script src="clock.js"></script>
</body>
</html>

这些方法提供了不同复杂度的时钟计时实现，从简单的显示当前时间到具有暂停、重置功能的计时器。根据需求选择适合的实现方式即可。