如何使用 HTML、CSS 和 JavaScript 创建数字时钟

数字时钟是 JavaScript 中最好的初学者项目之一。对于任何技能水平的人来说,它都很容易学习。

在本文中,您将学习如何使用 HTML、CSS 和 JavaScript 构建自己的数字时钟。您将获得各种 JavaScript 概念的实践经验,例如创建变量、使用函数、处理日期、访问和添加属性到 DOM 等等。

让我们开始吧。

数字时钟的组成部分

数字时钟有四个部分:时、分、秒和子午线。

数字时钟项目的文件夹结构

创建一个包含 HTML、CSS 和 JavaScript 文件的根文件夹。您可以随意命名文件。这里的根文件夹被命名为Digital-Clock 。根据标准命名约定,HTML、CSS 和 JavaScript 文件分别命名为index.htmlstyles.cssscript.js

使用 HTML 为数字时钟添加结构

打开index.html文件并粘贴以下代码:

 <!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "script.js"> </script>
</body>
</html>

在这里,创建了一个dividdigital-clock 。此 div 用于使用 JavaScript 显示数字时钟。 style.css是一个外部 CSS 页面,并使用<link>标签链接到 HTML 页面。同样, script.js是一个外部 JS 页面,使用< script>标签链接到 HTML 页面。

使用 JavaScript 为数字时钟添加功能

打开script.js文件并粘贴以下代码:

 function Time() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = "";
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;
// Set Timer to 1 sec (1000 ms)
setTimeout(Time, 1000);
}
// Function to update time elements if they are less than 10
// Append 0 before time elements if they are less than 10
function update(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}
Time();

理解 JavaScript 代码

Time()update()函数用于向数字时钟添加功能。

获取当前时间元素

要获取当前日期和时间,您需要创建一个 Date 对象。这是在 JavaScript 中创建 Date 对象的语法:

 var date = new Date();

当前日期和时间将存储在日期变量中。现在您需要从日期对象中提取当前的小时、分钟和秒。

date.getHours()date.getMinutes()date.getSeconds()分别用于从日期对象中获取当前的小时、分钟和秒。所有时间元素都存储在单独的变量中以供进一步操作。

 var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();

分配当前子午线 (AM/PM)

由于数字时钟采用 12 小时格式,您需要根据当前小时分配适当的子午线。如果当前小时大于或等于 12,则子午线为 PM(Post Meridiem),否则为 AM(Ante Meridiem)。

 var period = "";
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}

以 12 小时格式转换当前小时

现在您需要将当前小时转换为 12 小时格式。如果当前小时为 0,则当前小时更新为 12(根据 12 小时格式)。此外,如果当前小时数大于 12,则将其减少 12 以使其与 12 小时时间格式保持一致。

相关: 如何在网页上禁用文本选择、剪切、复制、粘贴和右键单击

if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}

更新时间元素

如果时间元素小于 10(个位数),则需要更新时间元素。 0 附加到所有个位数的时间元素(小时、分钟、秒)。

 hour = update(hour);
minute = update(minute);
second = update(second);
function update(t) {
if (t < 10) {
return "0" + t;
}
else {
return t;
}
}

将时间元素添加到 DOM

首先,使用目标 div 的 id ( digital-clock ) 访问 DOM。然后使用innerText setter 将时间元素分配给div。

 document.getElementById("digital-clock").innerText = hour + " : " + minute + " : " + second + " " + period;

每秒更新时钟

时钟每秒更新一次,使用 JavaScript 中的setTimeout()方法。

 setTimeout(Time, 1000);

使用 CSS 设计数字时钟

打开styles.css文件并粘贴以下代码:

相关:如何使用 CSS box-shadow:技巧和例子

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected]&display=swap');

#digital-clock {
background-color: #66ffff;
width: 35%;
margin: auto;
padding-top: 50px;
padding-bottom: 50px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 64px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

上面的 CSS 用于设置数字时钟的样式。在这里,Open Sans Condensed 字体用于显示时钟文本。它是使用@import从 Google 字体导入的。 #digital-clock id 选择器用于选择目标 div。 id 选择器使用 HTML 元素的id属性来选择特定元素。

相关:您可以在 10 分钟内学会的简单 CSS 代码示例

如果您想查看本文中使用的完整源代码,请访问GitHub 存储库。另外,如果你想看看这个项目的实时版本,你可以通过GitHub Pages查看。

注意:本文中使用的代码是MIT 许可的

开发其他 JavaScript 项目

如果您是 JavaScript 的初学者并想成为一名优秀的 Web 开发人员,您需要构建一些基于 JavaScript 的优秀项目。他们可以为您的简历和职业增加价值。

您可以尝试一些项目,例如计算器、Hangman 游戏、井字游戏、JavaScript 天气应用程序、交互式登录页面、重量转换工具、石头剪刀布等。

如果您正在寻找下一个基于 JavaScript 的项目,一个简单的计算器是一个很好的选择。