js时钟实现

2026-03-01 03:57:18JavaScript

使用JavaScript实现时钟

创建一个基本的HTML结构，包含一个显示时间的元素。

<div id="clock"></div>

编写JavaScript代码

使用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;
}

定时更新时钟

使用setInterval函数每秒更新一次时间显示。

updateClock(); // 立即执行一次
setInterval(updateClock, 1000); // 每秒更新一次

添加样式

通过CSS美化时钟显示，例如调整字体和颜色。

#clock {
    font-family: Arial, sans-serif;
    font-size: 48px;
    color: #333;
    text-align: center;
    margin-top: 20px;
}

完整代码示例

将HTML、CSS和JavaScript整合到一个文件中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Clock</title>
    <style>
        #clock {
            font-family: Arial, sans-serif;
            font-size: 48px;
            color: #333;
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <script>
        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);
    </script>
</body>
</html>

扩展功能

添加日期显示或切换12/24小时格式的功能。

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 date = now.toDateString();
    const timeString = `${hours}:${minutes}:${seconds} - ${date}`;
    document.getElementById('clock').textContent = timeString;
}

js时钟实现