HTML5+JavaScript实现动态电子时钟-优快云博客

本文链接：https://blog.youkuaiyun.com/wu1113_/article/details/135038885

文章目录

1.案例需求

设计一款简单的电子时钟，要求实现显示当前的时分秒，并且可以每秒更新一次实现动态效果。最终效果如下图所示。
在这里插入图片描述

2.编程思路

由上面的效果图可知，电子时钟主要由三个部分组成，分别是标题部分，水平线以及电子时钟部分。标题部分是一个<h3>标签，水平线部分是<hr>标签，电子时钟先用一个大div包裹住然后内部添加三个div用于显示时分秒的具体数字，并为其分別设置自定必id名称h、m、s（取hour、minute 和 second 的首字母）。并在3个显示框之间使用<div>元素插入两个分割区域，用于显示时分秒数字之间的冒号。现在电子时钟的界面设计已经完成了。
要想实现时钟动态的效果，可以用document.getElementById()方法获取用于显示时分秒的3个显示框对象。然后在 JavaScript 中创建自定义函数方法getCurrentTime()，用于获取当前时间并显示在页面中。在该段代码中首先使用了 JavaScript 中的Date 对象获取当前时间的时分秒具体数值，为确保每次均显示成两位数的效果，分别判断当前时分秒是否小于 10，如果比10 小则在前面加一个数字0，然后将修改后的数值使用 innerHTML 属性显示到对应的时间显示框中，最后在 JavaScript 代码部分添加 setlnterval( )方法，设置成每秒钟重新调用一次获取当前时间并显示在页面上的 getCurrentTime( )函数。

3.案例源码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电子时钟的设计与实现</title>
    <link rel="stylesheet" href="css/clock.css" />
  </head>
  <body onload="getCurrentTime()">
    <!-- 标题 -->
    <h3>简单电子时钟的设计与实现</h3>
    <!-- 水平线 -->
    <hr />
    <!-- 电子时钟区域 -->
    <div id="clock">
      <div class="box1" id="h"></div>
      <div class="box2">:</div>
      <div class="box1" id="m"></div>
      <div class="box2">:</div>
      <div class="box1" id="s"></div>
    </div>
    <script>
      let hour = document.getElementById("h");
      let minute = document.getElementById("m");
      let second = document.getElementById("s");
      function getCurrentTime() {
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        if (h < 10) {
          h = "0" + h; //以确保0-9是也显示成两位数
        }
        if (m < 10) {
          m = "0" + m; //以确保0-9是也显示成两位数
        }
        if (s < 10) {
          s = "0" + s; //以确保0-9是也显示成两位数
        }
        hour.innerHTML = h;
        minute.innerHTML = m;
        second.innerHTML = s;
      }
      setInterval("getCurrentTime()", 1000);
    </script>
  </body>
</html>