如果以正确的方式使用，时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站，例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。时钟基本上有两种类型，模拟和数字。我们将考虑制作数字版。
方法：方法是使用日期对象每秒获取时间
然后使用我们通过每秒调用相同函数获得的新时间在浏览器上重新渲染时间。
HTML 代码：在本节中，我们有一个包含在“div”标签中的“HH:MM:SS”格式的虚拟时间。
Digital Clock
8:10:45
CSS 代码：对于 CSS，我们刚刚将时钟与页面中心对齐。除此之外，它只是一些字体大小和宽度，您可以根据需要进行调整。
#clock {
font-size: 175px;
width: 900px;
margin: 200px;
text-align: center;
border: 2px solid black;
border-radius: 20px;
}
JavaScript 代码：对于 JavaScript，请按照以下步骤操作。
- 第 1 步：创建一个函数“showTime”。
- 第 2 步：创建Date对象的实例。
- 第三步：使用Date对象的方法获取“小时”、“分钟”和“秒”。
- 第 4 步：根据小时值设置 AM/PM。 Date对象以 24 小时格式工作，因此当它大于 12 时，我们将小时改回 1。AM/PM 也相应改变。
- 第 5 步：现在使用相同的 HH:MM:SS 格式创建一个字符串，使用我们从Date对象方法获得的值更改小时、分钟和秒值。
- 第 6 步：现在使用innerHTML属性替换“div”中的字符串变量。
- 第 7 步：要每秒调用一次该函数使用setInterval()方法并将时间间隔设置为 1000 毫秒，即等于 1 秒。
- 步骤8：现在调用函数结束时在精确重装启动函数/渲染时间的setInterval()将渲染1S后第一个呼叫。
注意：您可以使用在线提供的数字字体使时钟看起来更漂亮。为此，您必须将他们的文件下载到您的项目中，然后使用“font-face”属性来使用该自定义字体。
setInterval(showTime, 1000);
function showTime() {
let time = new Date();
let hour = time.getHours();
let min = time.getMinutes();
let sec = time.getSeconds();
am_pm = "AM";
if (hour > 12) {
hour -= 12;
am_pm = "PM";
}
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;
document.getElementById("clock")
.innerHTML = currentTime;
}
showTime();
完整代码：是以上三段代码的组合。
Digital Clock
8:10:45
输出： 