实现用图片的方法显示时间

临叮当

已于 2022-12-06 00:00:14 修改

阅读量487

点赞数

文章标签： javascript html

于 2022-07-22 14:55:59 首次发布

本文链接：https://blog.csdn.net/weixin_50751685/article/details/125932478

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>date</title>
   </head>
   <style type="text/css">
       .max{

           width: 700px;
           height: 200px;
           margin: 100px auto;
           position: relative;
       }
       img{
           width: 100px;
           height: 190px;
           float: left;
       }
       .aa{
           font-size: 100px;
           width: 50px;
           text-align: center;
           float: left;
           margin: 30px auto;
           color:darkslateblue;
       }
   </style>
   <body>
       <div class="max">
           <img src="../img2/0.png" class="one">
           <img src="../img2/0.png" class="two">
           <div class="aa">:</div>
           <img src="../img2/0.png" class="one1">
           <img src="../img2/0.png" class="two1">
           <div class="aa">:</div>
           <img src="../img2/0.png" class="one2">
           <img src="../img2/0.png" class="two2">
       </div>
   </body>
   <script type="text/javascript">
       //var dqsj = new Date();
       var sj = ["0","1","2","3","4","5","6","7","8","9"];//图片名字（可以直接去截图数字）
       var one = document.querySelector(".one");
       var two = document.querySelector(".two");
       var one1 = document.querySelector(".one1");
       var two1 = document.querySelector(".two1");
       var one2 = document.querySelector(".one2");
       var two2 = document.querySelector(".two2");


       setInterval(function(){
           var dqsj = new Date();
           let sz = dqsj.toLocaleTimeString();
           sj.forEach(item=>{
               if(sz.charAt(0)==item){
                   one.src="../img2/"+item+".png"
               }
               if(sz.charAt(1)==item){
                   console.log(item)
                   two.src="../img2/"+item+".png"
               }
               if(sz.charAt(3)==item){
                   one1.src="../img2/"+item+".png"
               }
               if(sz.charAt(4)==item){
                   console.log(item)
                   two1.src="../img2/"+item+".png"
               }
               if(sz.charAt(6)==item){
                   one2.src="../img2/"+item+".png"
               }
               if(sz.charAt(7)==item){
                   console.log(item)
                   two2.src="../img2/"+item+".png"
               }
           })
       },1000)
   </script>
</html>