当前位置：首页 > JavaScript

js实现数字时钟

2026-03-01 12:57:38JavaScript

使用JavaScript实现数字时钟

基础HTML结构

创建一个简单的HTML文件，包含一个用于显示时间的div元素：

<!DOCTYPE html>
<html>
<head>
    <title>数字时钟</title>
    <style>
        #clock {
            font-size: 48px;
            text-align: center;
            margin-top: 100px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="clock"></div>
    <script src="clock.js"></script>
</body>
</html>

JavaScript实现

新建一个clock.js文件，编写以下代码：

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);

添加日期显示

如果需要同时显示日期，可以修改updateClock函数：

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 day = now.getDate().toString().padStart(2, '0');
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const year = now.getFullYear();

    const timeString = `${hours}:${minutes}:${seconds}`;
    const dateString = `${year}-${month}-${day}`;
    document.getElementById('clock').innerHTML = `${dateString}<br>${timeString}`;
}

12小时制版本

如果需要12小时制显示，可以修改时间获取部分：

function updateClock() {
    const now = new Date();
    let hours = now.getHours();
    const ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // 将0转换为12
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    const timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
    document.getElementById('clock').textContent = timeString;
}

添加样式效果

可以添加CSS动画效果使时钟更生动：

#clock {
    font-size: 48px;
    text-align: center;
    margin-top: 100px;
    font-family: Arial, sans-serif;
    color: #333;
    text-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: all 0.5s ease;
}

#clock:hover {
    color: #0066cc;
    text-shadow: 0 0 20px rgba(0,102,204,0.3);
    transform: scale(1.05);
}

这些代码实现了一个功能完整的数字时钟，可以根据需要选择12小时制或24小时制，并添加了日期显示和简单的动画效果。

js实现数字时钟