基于JavaScript实现数码时钟效果

正直为人,诚信待人,爱岗敬业,尽心竭力。一个人的梦想也许不值钱,但一个人的发奋很值钱。早上好!

本文实例为大家分享了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实现数码时钟效果就介绍到这了。对于人生道路上的第一次选择,我从未后悔过,觉得有为的选择虽然是一种牺牲,可这种牺牲值得。更多相关基于JavaScript实现数码时钟效果内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
javascript请求servlet实现ajax示例(分享)

JavaScript操作表单_动力节点Java学院整理

纯javascript的ajax实现php异步提交表单的简单实例

JavaScript实现Ajax总结

初步了解JavaScript,Ajax,jQuery,并比较三者关系