用JS做的一款电子时钟_电子时钟 js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43192247/article/details/101116180

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>电子时钟</title>
  <script>
    function change(n){
      if(n<10)
        return "0"+n;
      else
        return ""+n;
    }
    function changeMonth(n){
      if(n<10)
        return "0"+(n+1);
      else
        return ""+(n+1);
    }
    window.onload=function(){
      var image=document.getElementsByTagName("img");
      setInterval(function(){
        var oDate=new Date();
        var str=change(oDate.getFullYear())+changeMonth(oDate.getMonth())+change(oDate.getDate())+change(oDate.getHours())+change(oDate.getMinutes())+change(oDate.getSeconds());
        for(var i=0;i<image.length;i++){
          image[i].src=str[i]+".png";
        }
      },1000)
    }
  </script>
</head>
<body style="background:black;color:red;font-size:80px">
  电子时钟<br>
  <img src="0.png" width="5%"/>
   <img src="0.png" width="5%"/>
   <img src="0.png" width="5%"/>
   <img src="0.png" width="5%"/>年
   <img src="0.png" width="5%"/>
   <img src="0.png" width="5%"/>月
   <img src="0.png" width="5%"/>
   <img src="0.png" width="5%"/>日<br>
  <img src="0.png" width="10%"/>
   <img src="0.png" width="10%"/>
   :
      <img src="0.png" width="10%"/>
         <img src="0.png" width="10%"/>
         :
               <img src="0.png" width="10%"/>
                 <img src="0.png" width="10%"/>
</body>
</html>

在这里插入图片描述