JS实现数码时钟

最新推荐文章于 2022-04-12 23:14:24 发布

安萌萌萌萌萌

最新推荐文章于 2022-04-12 23:14:24 发布

阅读量1.3k

点赞数 3

分类专栏：前端文章标签： javascript html5 css3 jquery

本文链接：https://blog.youkuaiyun.com/weixin_43981560/article/details/105937253

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现一个简单的数字时钟。通过在HTML页面中设置一个div元素并加载默认数字0的图片，然后利用JavaScript的定时器获取当前时间，并根据个位和十位对时间进行处理。将时间值存储在数组中，通过遍历并改变所有img元素的src属性，实现在页面上动态展示时间的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS时钟来啦~ - 几行代码实现在页面上显示时间，制作一个简介漂亮的页面时钟。首先div里加载图片，默认显示数字0，

<div id="d1">
        <img src="./imgs/img/0.jpg" alt="">
        <img src="./imgs/img/0.jpg" alt="">
        <h1>时</h1>
        <img src="./imgs/img/0.jpg" alt="">
        <img src="./imgs/img/0.jpg" alt="">
        <h1>分</h1>
        <img src="./imgs/img/0.jpg" alt="">
        <img src="./imgs/img/0.jpg" alt="">
        <h1>秒</h1>
    </div>

在JS中设置定时器，获取时间，并对时间进行个位、十位判断，可以用一个数组来存储这些数值，通过document对象获取所有img，再使用for循环更改img中src，就大功告成！

var Images = document.getElementsByTagName("img");
setInterval(function() {
//获取时间
      var d = new Date();
      var hours = d.getHours();
      var min = d.getMinutes();
      var sec = d.getSeconds();
      var _date = [hours < 10 ? 0 : Math.floor(hours / 10), hours % 10, min < 10 ? 0 : Math.floor(min /
                    10), min % 10, sec < 10 ? 0 : Math.floor(sec / 10), sec % 10];
      for (var i = 0; i < Images.length; i++) {
          Images[i].src = "./imgs/img/" + _date[i] + ".jpg";
      }
  },
  1000);