JS实现数码时钟

2023年8月6日10:07:24
  • JS时钟来啦~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);

  • 作者:安萌萌萌萌萌
  • 原文链接:https://blog.csdn.net/weixin_43981560/article/details/105937253
    更新时间:2023年8月6日10:07:24 ,共 754 字。