制作一个电子时钟

1.案例需求

制作一个电子时钟

2.编程思路

第一步：创建了一个包含一个div元素用于显示当前时间的HTML页面；
第二步：通过JavaScript中的Date对象获取当前时间，并在页面上更新时间显示；
第三步：写一个setInterval函数用于每秒调用time函数来更新时间。

3.案例源码

CSS代码

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        display: inline-block;
        width: 120px;
        height: 120px;
        font-size: 80px;
        color: red;
        border: 3px black solid;
        text-align: center;
        line-height: 120px;
      }
      .d {
        width: 20px;
        border: none;
      }
      #box {
        width: 600px;
        height: 120px;
        border: none;
        margin: 50px auto;
        display: block;
      }
    </style>

HTML代码

<div id="box">
      <div id="h"></div>
      <div class="d">:</div>
      <div id="min"></div>
      <div class="d">:</div>
      <div id="s"></div>
    </div>

JS代码

<script>
      function time() {
        var currentDate = new Date();
        var hours = currentDate.getHours();
        var minutes = currentDate.getMinutes();
        var seconds = currentDate.getSeconds();
        if (hours < 10) hours = "0" + hours; //以确保0-9时也显示成两位数
        if (minutes < 10) minutes = "0" + minutes; //以确保0-9分钟也显示成两位数
        if (seconds < 10) seconds = "0" + seconds; //以确保0-9秒也显示成两位数
        document.getElementById("h").innerHTML = hours;
        document.getElementById("min").innerHTML = minutes;
        document.getElementById("s").innerHTML = seconds;
      }
      setInterval(time, 1000);
    </script>

4.运行效果

5.技术细节

提示：为了确保时针分针秒针在0~9时显示成两位数，我们可以添加一个if语句控制一下

例如：
if (hours < 10) hours = “0” + hours; //以确保0-9时也显示成两位数
if (minutes < 10) minutes = “0” + minutes; //以确保0-9分钟也显示成两位数
if (seconds < 10) seconds = “0” + seconds; //以确保0-9秒也显示成两位数

6.小结

在样式部分，定义了div元素的样式，包括宽度、高度、字体大小、颜色等，以及一个#box元素用于容纳时钟显示区域的样式。
在JavaScript部分，time函数获取当前时间的小时、分钟和秒数，并将它们显示在对应的div元素中。通过setInterval函数每秒调用一次time函数来实现时间的实时更新。