时钟是我们用来测量时间的装置。如果使用得当，时钟对于任何 UI 都是有用的元素。时钟可用于以时间为主要关注点的网站，例如一些预订网站或一些显示火车、公共汽车、航班等到达时间的应用程序。时钟基本上有两种类型，模拟和数字。在这里，我们将设计数字时钟并添加一些样式以使其更具吸引力。

思路

使用日期对象获取每秒的时间，然后使用我们通过每秒调用相同函数获得的新时间在浏览器上重新渲染时间，并使时钟看起来更有吸引力。

HTML & CSS 代码

在本节中，我们将“HH:MM:SS”格式的虚拟时间包裹在“div”标签中，并且我们在外部包含了 CSS 和 JavaScript 文件。

HTML

CSS

获取谷歌字体的链接

@import url(
'https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

设置 body 样式

body {

  /* 设置body 的背景颜色 */
  background-color: #afd275;

  /* 将项目置于中心 */
  align-items: center;
  display: flex;
  justify-content: center;

  /* 指定垂直高度 */
  height: 100vh;
  overflow-y: hidden;
}

设置 clock 样式

.clock {
  position: absolute;
     /* 把时钟内容放在屏幕中央 */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: white;
  font-size: 60px;
  font-family: Orbitron;
    /* 提供时钟字母之间的空间 */
  letter-spacing: 7px;
  align-items: center;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  margin-right: 4rem;
  height: 500px;
  width: 550px;
    /* 将新同态效果设置为时钟的身体 */
  background-color: #afd275;
  box-shadow: inset 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
  inset -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
}

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() 将在渲染 1 秒后首先调用。

index.js

1.显示时间的 function

function showTime() {

}

2.使用 Date 对象获取今天的日期和时间

   var date = new Date();

3.getHOurs() 函数用于获取小时数

var h = date.getHours(); // 0 - 23

4.getMinutes() 函数用于获取分钟数

var m = date.getMinutes(); // 0 - 59

5.getSecond() 函数用于获取秒数

var s = date.getSeconds(); // 0 - 59

6.显示上午或下午

var session = "AM";

7.检查时间是否达到 12 ，即它再次从 12 开始的条件

if (h == 0) {
    h = 12;
}

8.如果小时超过 12 则将从 12 中减去并将会话设为下午

if (h > 12) {
    h = h - 12;
    session = "PM";
}

h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;

var time = h + ":" + m + ":" 
        + s + " " + session;

10.使用 DOM 元素在屏幕上显示元素

document.getElementById("MyClockDisplay")
            .innerText = time;

document.getElementById("MyClockDisplay")
            .textContent = time;

11.每秒调用一次该函数，使用 setInterval() 方法并将时间间隔设置为 1000ms，等于 1s

setTimeout(showTime, 1000);

完整JS代码

function showTime() {
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    if (h == 0) {
        h = 12;
    }
    if (h > 12) {
        h = h - 12;
        session = "PM";
    }

    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;

    var time = h + ":" + m + ":" 
            + s + " " + session;
    document.getElementById("MyClockDisplay")
                .innerText = time;
    document.getElementById("MyClockDisplay")
                .textContent = time;
    setTimeout(showTime, 1000);
}

showTime();

完整源码

关注作者公众号【海拥】回复【代码】，免费下载完整源码。更多相关文章及在这里：

如果你真的从这篇文章中学到了一些新东西，喜欢它，收藏它并与你的小伙伴分享。🤗最后，不要忘了❤或📑支持一下哦