欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

基于JavaScript实现数码时钟效果

程序员文章站 2023-02-24 10:18:59
本文实例为大家分享了js实现数码时钟效果展示的具体代码，供大家参考，具体内容如下 通过建立todbl函数将小于10的时间前面补上“0”使得时钟正常运行。...

本文实例为大家分享了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>

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

上一篇： 详解jQuery中关于Ajax的几个常用的函数

下一篇： jQuery Pagination分页插件_动力节点Java学院整理

推荐阅读