极客教程JavaScript 如何设计数字时钟
如果以合适的方式使用，时钟将成为任何用户界面的有用元素。时钟可以用于那些需要主要关注时间的网站，比如一些预订站点或一些显示火车、公交车、飞机等到达时间的应用程序。时钟基本上有两种类型，模拟钟和数字钟。我们将看一下如何制作一个数字钟。
先决条件
方法
- 在HTML中使用一个包含显示时间的时间格式“HH:MM:SS”的div标签创建网页结构。
- 使用HTML中定义的元素和类样式化页面。
- 在JavaScript中定义一个showTime函数，并使用JavaScript的setInterval()方法每秒渲染它。
- 使用JavaScript的new Date()创建一个新的时间实例。
- 将其转换为字符串格式并显示输出。
示例：
// Calling showTime function at every second
setInterval(showTime, 1000);
// Defining showTime funcion
function showTime() {
// Getting current time and date
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
// Setting time for 12 Hrs format
if (hour >= 12) {
if (hour > 12) hour -= 12;
am_pm = "PM";
} else if (hour == 0) {
hr = 12;
am_pm = "AM";
}
hour =
hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let currentTime =
hour +
":" +
min +
":" +
sec +
am_pm;
// Displaying the time
document.getElementById(
"clock"
).innerHTML = currentTime;
}
showTime();
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Digital Clock</title>
<link rel="stylesheet" href="clock2.css">
</head>
<body>
<div id="clock">8:10:45</div>
<script src="clock2.js"></script>
</body>
</html>
CSS代码
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
注意： 您可以使用在线可用的数字字体使时钟看起来更漂亮。为此，您必须将其文件下载到您的项目中，然后使用“font-face”属性来使用该自定义字体。
输出： 单击此处查看实际输出。
JavaScript 是最为人所知的用于网页开发的语言，但也用于各种非浏览器环境。您可以通过参考这个 JavaScript 教程和 JavaScript 示例从零开始学习 JavaScript。