数码时钟

最新推荐文章于 2022-10-24 00:00:00 发布

woaijianjiandandande

最新推荐文章于 2022-10-24 00:00:00 发布

阅读量269

点赞数

分类专栏： JavaScript 文章标签：时钟 JavaScript

本文链接：https://blog.csdn.net/woaijianjiandandande/article/details/52961314

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<pre name="code" class="html"><span style="font-family:Arial;font-size:18px;"><!DOCTYPE html>
<html>
<head>
      <title>demo</title>
  
      <script>
                  function doubl(n){ //返回出来的都是字符串
                      if(n<10)
                          return '0'+n;
                      else
                          return ''+n;//加一个空字符串一起返回表明，返回出来的都是字符串
                      }
                      
                      
              window.οnlοad=function(){//这条语句在整个页面加载完成后才能够进行
                  var Img=document.getElementsByTagName("img");//获取要修改的元素，注意不能写错
                  
                  function teal(){
                      
                      var date=new Date();
                      var str=doubl(date.getHours())+doubl(date.getMinutes())+doubl(date.getSeconds());
					  //var str="210101";
                      for(var i=0;i<Img.length;i++)
                      {
                          Img[i].src='image/'+str.charAt(i)+'.png';//使用方法str.charAt(i)兼容所有浏览器。这句话用来设置图片的路径问题
                      }
                      
                  }
                      setInterval(teal,1000);//定时器在打开一秒种后才执行。所以用这种方式防止延时。每隔一秒钟，函数teal(){}就会执行一次
                      teal();
              }
      
      </script>
  </head>
<body style="font-size:50px">
    <br>时钟再现<br><br>
    <img src="image/0.png">
    <img src="image/0.png">
    ：
    <img src="image/0.png">
    <img src="image/0.png">
    ：
    <img src="image/0.png">
    <img src="image/0.png">

</body>
</html>
</span>