使用 Javascript 创建数字时钟

2025-06-07

使用 Javascript 创建数字时钟

在今天的教程中，我们将创建一个数字时钟，它可以显示当前时间，并带有一个实用的闹钟功能。学完本教程后，你将熟悉 JavaScript Date 对象的使用，并对异步代码执行和 setTimeout API 有基本的了解。

视频教程

如果您更喜欢详细的视频教程，请随时查看我在YouTube 频道上创建的教程：

HTML

这个项目的 HTML 标记非常简单。但在实现它之前，我们先添加 Google 的自定义字体，用于headHTML 文档的相应部分。我还会添加我们稍后要创建的样式表。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
Enter fullscreen mode Exit fullscreen mode

我们将创建一个带有 类的 sectioncontainer来存放我们的时钟。在其下方，我们需要创建一个空的 div，用于显示当前时间。我给它的 id 赋值为clock，这样更容易定位。

<section class="container">
  <div id="clock"></div>
</section>
Enter fullscreen mode Exit fullscreen mode

接下来我们将添加输入字段，以便用户选择日期和时间设置闹钟。这里重要的是，输入类型应该是"datetime-local"。我们还将为其添加一个 name 属性和一个 onchange 事件处理程序。当 onchange 事件发生时（输入字段的值发生变化），我们将触发setAlarmTime(this.value)一个稍后将在 js 文件中实现的函数。我们将传入this.value该函数，该函数将返回输入字段新的更新值。

<input onchange="setAlarmTime(this.value)" name="alarmTime" type="datetime-local">
Enter fullscreen mode Exit fullscreen mode

接下来我们需要添加控制按钮。我们将把这两个按钮包裹在一个 div 容器中，并为其添加 CSS 类名。在 div 容器中添加两个按钮：“设置闹钟”和“清除闹钟”。除了 CSS 类名之外，我们还添加了点击事件处理函数。稍后我们将在 JavaScript 中创建和controls函数。setAlarm()clearAlarm()

<div class="controls">
  <button onclick="setAlarm()" class="button set-alarm">Set alarm</button>
  <button onclick="clearAlarm()" class="button clear-alarm">Clear alarm</button>
</div>
Enter fullscreen mode Exit fullscreen mode

最后，我们必须在 HTML 文档主体的底部引入 JavaScript 文件。我们需要在文档末尾导入它，这样当脚本运行时，DOM 树就已经准备好了。（你也可以在 head 中使用defer关键字引入它）。

<script src="index.js"></script>
Enter fullscreen mode Exit fullscreen mode

CSS

在我们的styles.css文件中，我将首先清除每个浏览器定义的填充和边距，并设置深色背景颜色。

body,html {
    margin: 0;
    padding: 0;
    background-color: #12181B;
}

* {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode

使用 flexbox 我们将使容器占据整个视口，并将其内容置于中心。

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

对于时钟，我们将设置之前在 HTML 中添加的字体，并设置所需的字体大小。我还将为时钟添加渐变色。为此，我们将设置一个渐变色作为背景图像，然后使用 CSS 规则为字体添加背景渐变色background-clip: text。

#clock {
    font-family: 'Orbitron', sans-serif;
    font-size: 15vw;
    background-image: linear-gradient(180deg,
        rgba(99,253,136,1) 0%,
        rgba(51,197,142,1) 50%,
        rgba(39,97,116,1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent; 
    -moz-text-fill-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

最后，我们对控制按钮和包装器 div 进行一些样式设置。

.controls {
    margin-top: 16px;
}

.button {
    font-weight: bold;
    border-radius: 5px;
    border: none;
    color: white;
    padding: 4px 8px;
    margin-left: 4px;
    cursor: pointer;
}

.set-alarm {
    background-color: #498AFB;
}

.clear-alarm {
    background-color: #FF3860;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

这将是我们时钟应用的核心。首先，我们将时钟显示（带有clockid 的 div）的引用保存到一个 display 变量中。我们还将设置闹钟的音频。为此，我将使用 Mixkit 提供的免费闹钟声音，您可以随意使用任何您选择的音乐/声音。
我们将创建一个新的 Audio 对象并将其保存到该audio变量中。我们还将音频对象的 loop 属性设置为 true，因为我们想要播放声音，直到手动关闭闹钟为止。如您所见，我们有一个alarmTime和alarmTimeout变量，我们将它们初始化为 null。我们将使用这些变量来实现闹钟功能。

const display = document.getElementById('clock');
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
audio.loop = true;
let alarmTime = null;
let alarmTimeout = null;
Enter fullscreen mode Exit fullscreen mode

现在我们将实现时钟功能。在updateTime函数中，我们创建一个新的 Date 对象。由于我们没有提供任何参数，它将创建一个包含当前时间的对象。然后，我们创建三个变量，分别从 Date 对象中获取小时、分钟和秒的值。我们可以使用 JavaScript Date 对象的 API 轻松完成此操作。
为了获得美观的数字显示，我们将创建一个用于格式化时间值的函数。如果数字只有一位，它会在前导零处添加一个数字，否则直接使用数字本身。例如，如果提供的时间值为9，则返回09结果。

function formatTime(time) {
    if ( time < 10 ) {
        return '0' + time;
    }
    return time;
}
Enter fullscreen mode Exit fullscreen mode

最后，我们必须重写displayDOM 节点的 innerText 来表示当前时间。我在这里使用了字符串模板字面量，因此介于两者之间的任何内容都${}将被替换为该变量的值。

function updateTime() {
    const date = new Date();

    const hour = formatTime(date.getHours());
    const minutes = formatTime(date.getMinutes());
    const seconds = formatTime(date.getSeconds());



    display.innerText=`${hour} : ${minutes} : ${seconds}`
}
Enter fullscreen mode Exit fullscreen mode

现在我们只需每秒调用一次此函数来更新显示的时间。我们可以通过使用 setInterval API 来实现，将 updateTime 函数传递给它，并将 1000（以毫秒为单位）作为第二个参数。

setInterval(updateTime, 1000);
Enter fullscreen mode Exit fullscreen mode

现在我们有了一个可以工作的时钟。是时候实现闹钟功能了。首先，我们必须收集并保存用户选择的日期和时间。我们已经onchange在 HTML 中附加了一个事件监听器，现在只需在 JavaScript 中实现它。我们只需从事件处理程序中获取值并将其保存到alarmTime变量中即可。

function setAlarmTime(value) {
    alarmTime = value;
}
Enter fullscreen mode Exit fullscreen mode

现在我们应该实现这个setAlarm函数。它将负责将闹钟设置为所需的时间并播放声音。如果alarmTime设置了，我们将创建两个 Date 对象，一个使用当前时间（空参数），另一个使用用户选择的闹钟时间和日期。如果闹钟时间是未来的时间，我们将设置闹钟。为了计算距离闹钟剩余的时间，我们将两个日期都转换为以毫秒为单位的时间（这将为我们提供自 Unix 纪元以来以毫秒为单位的打包时间，更多详情请见此处）并从当前值中减去未来值。这样我们就知道距离闹钟播放还剩多少毫秒。我们只需设置一个超时来调用音频对象的播放方法。我们还将 setTimeout 函数的返回结果保存到全局alarmTimeout变量中。如果需要，我们将使用此引用清除超时。

function setAlarm() {
    if(alarmTime) {
        const current = new Date();
        const timeToAlarm = new Date(alarmTime);

        if (timeToAlarm > current) {
            const timeout = timeToAlarm.getTime() - current.getTime();
            alarmTimeout = setTimeout(() => audio.play(), timeout);
            alert('Alarm set');
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

我们最后要实现的是闹钟的清晰功能。如果闹钟已经在播放，我们将停止它；如果闹钟在将来，我们将取消设置的闹钟。因此，在我们的clearAlarm函数中，我们将调用音频对象的 pause 方法。然后，如果我们有一个定时闹钟（因此 alarmTimeout 有一个值），我们将使用内置clearTimeout函数取消该将来的函数调用。

function clearAlarm() {
    audio.pause();
    if (alarmTimeout) {
        clearTimeout(alarmTimeout);
        alert('Alarm cleared');
    }
}
Enter fullscreen mode Exit fullscreen mode

整个项目可以在 GitHub 上找到。

结论

这就是用 JavaScript 轻松创建带有闹钟功能的数字时钟的方法。我认为这是一个有趣的项目，你可以尝试一下，同时还能练习一些 JavaScript 的基础知识，例如日期、DOM 修改以及 setInterval 和 setTimeout 等异步 API。

您可以在哪里向我了解更多信息？

我创建了涵盖多个平台上的 Web 开发的教育内容，请随意查看。

我还创建了一个简报，分享我创作的一周或两周的教育内容。不废话💩，只讲教育内容。

🔗 链接：

文章来源：https://dev.to/javascriptacademy/create-a-digital-clock-using-javascript-12d3
Devto 翻译
PREV
使用 JavaScript 实现矩阵下雨代码效果 动机 实现 结论 在哪里可以学到更多？CMatrix - JavaScript 中的矩阵效果
NEXT
学习 Spring 5 - Spring 5 核心终极指南