基于JS时间对象的电子时钟效果设计与实现

小—杨

于 2024-03-02 10:42:40 发布

阅读量369

点赞数 8

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_63538423/article/details/136411363

版权

实验技术：

1.利用JS时间对象 new Date() 获取时间（时，分，秒）。

2.所有的数字都是图片，一共有0到9 的数字图片十张。时分秒都分为十位和个位数，用两张图片表示一个时间。

3.利用计时器，获取时间数据，利用时间数据分别替换对应图片。

自行准备好 0-9 和冒号的图片，并保存在站点img文件夹中。

利用计时器，每隔1s从时间对象获取对应的时间数据。

下面是电子时钟实现代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>时间</title>
  <style>
    body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
    }

    .times {
      text-align: center;
    }

    .digit {
      display: inline-block;
      width: 30px;
      height: 50px;
      background-size: contain;
    }

    button {
      margin-top: 10px;
      padding: 10px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="times">
    <div id="time"></div>
    <button onclick="start()">开始</button>
    <button onclick="stop()">停止</button>
  </div>
  <script>
    var intervalId;

    function dispTime() {
      var now = new Date();
      var year = now.getFullYear().toString();
      var month = (now.getMonth() + 1).toString();
      var day = now.getDate().toString();
      var hour = now.getHours()> 9 ?now.getHours(): "0" + now.getHours().toString();
      var minu = (now.getMinutes() > 9 ? now.getMinutes() : "0" + now.getMinutes()).toString();
      var ss = (now.getSeconds() > 9 ? now.getSeconds() : "0" + now.getSeconds()).toString();

      var timeStr = year + "  " + month + "  " + day + "  " + hour + ":" + minu + ":" + ss;
      document.getElementById("time").innerHTML = timeStr;

      // 将每个数字转换为图像
      var digitImages = timeStr.split('').map(function(char) {
        if (char === ' ') {
          return '<span>&nbsp;</span>'; // 空格不用图片表示
        } else if (char === ':') {
          return '<img class="digit" src="./img/mao.png" alt=":">';
        } else {
          return '<img class="digit" src="./img/' + char + '.png" alt="' + char + '">';
        }
      });

      // 显示数字图像
      document.getElementById("time").innerHTML = digitImages.join('');
    }

    function start() {
      if (intervalId) {
        clearInterval(intervalId);
      }
      dispTime(); // 显示当前时间
      intervalId = setInterval(dispTime, 1000);
    }

    function stop() {
      clearInterval(intervalId);
    }

    // 页面加载时即开始显示时间
    start();
  </script>
</body>
</html>

小—杨

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
基于JS时间对象的电子时钟效果设计与实现

按照电子时钟显示效果，完成HTML结构及其相关CSS样式，并且能基于系统时间，让电子时钟走动起来。
复制链接

扫一扫