当前位置：Gxlcms > JavaScript > 基于JavaScript实现数码时钟效果

基于JavaScript实现数码时钟效果

时间：2021-07-01 10:21:17 帮助过：18人阅读

本文实例为大家分享了js实现数码时钟效果展示的具体代码，供大家参考，具体内容如下

通过建立toDBl函数将小于10的时间前面补上“0”使得时钟正常运行。
通过for循环将数组中的每一项都赋值给img元素相对应的上面，str.charAt(i)通过i递增将str的每个数字输入到src中。
通过封装函数tick，并调用了一次，使得网页在刷新时不会出现图片变化。
通过getHours，getMinutes，getSeconds来获取当前时间的数值。并将其通过toDbl函数+‘ '（一个空的字符串），将数字转化为字符串，并将这些字符串添加到str中。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数码时钟2</title>
  <style type="text/css"> 
  *{
    background-color: rgb(7,110,177);
    vertical-align: middle;
  }
  #div1{
    text-align: center;
    width: 1300px;
    height: 220px;
    margin:0 auto;
  }
  span{
    font-size: 50px;
    color: white;
  }
  </style>
  <script type="text/javascript">
  window.onload=function()
  {
    var aImg = document.getElementsByTagName('img');
    function tick()
    {
      var oDate = new Date();
      var str = toDbl(oDate.getHours())+toDbl(oDate.getMinutes())+toDbl(oDate.getSeconds());
      for (var i = 0; i < aImg.length; i++) {
      aImg[i].src='images/'+str.charAt(i)+'.jpg';
      };
    };
    setInterval(tick,500);
    tick();

  };
  function toDbl(n)
  {
    if (n<10) {
      return '0'+n;
    } else {
      return ''+n;
    }
  };
  </script>
</head>
<body>
  <div id="div1">
    <img src="images/1.jpg">
    <img src="images/2.jpg">
    <span>:</span>
    <img src="images/3.jpg">
    <img src="images/4.jpg">
    <span>:</span>
    <img src="images/5.jpg">
    <img src="images/6.jpg">
  </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

基于JavaScript实现数码时钟效果

人气教程排行