js图片时间翻转

带素材

代码一：

<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 11:30:34
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js翻转的时间</title>
  <style>
    div{
      margin: auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    document.write('<div id="time_box"></div>');
    var time_box=document.getElementById("time_box");
    var a_img=document.getElementsByTagName("img");
    for(var i=0;i<8;i++){
      time_box.innerHTML+='<img alt="图片' + i + '">';
    };
    var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]
    var t1=setInterval(function(){
      var t2;
      var time=new Date();
      var time_str=add0(time.getHours())+""+add0(time.getMinutes())+""+add0(time.getSeconds());
      a_img[0].src=arr[time_str[0]];
      a_img[1].src=arr[time_str[1]];
      a_img[2].src="colon.jpg";
      a_img[3].src=arr[time_str[2]];
      a_img[4].src=arr[time_str[3]];
      a_img[5].src="colon.jpg";
      a_img[6].src=arr[time_str[4]];
      a_img[7].src=arr[time_str[5]];
      t2=setInterval(function(){
        console.log("t2")
        clearInterval(t2)
        a_img[2].src="space.jpg";
        a_img[5].src="space.jpg";
      },500)
    },1000);
    function add0(a){
      if(a<10){
        return "0"+a;
      }else{
        return a;
      };
    };
  </script>
</body>
</html>
View Code

代码二：

<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 12:05:10
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js翻转的时间2</title>
  <style>
    div{
      margin: auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    document.write('<div id="time_box"></div>');
    var time_box=document.getElementById("time_box");
    var a_img=document.getElementsByTagName("img");
    for(var i=0;i<8;i++){
      time_box.innerHTML+='<img alt="图片' + i + '">';
    };

    var t2;
    var arr=["0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"]
    var t1=setInterval(function(){
      var time=new Date();
      var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());
      var j=0;
      for(var i=0;i<a_img.length;i++){
        if(i==2 || i==5){
          a_img[i].src="colon.jpg";
          clearInterval(t2)
          t2=setInterval(function(){
            a_img[2].src="space.jpg";
            a_img[5].src="space.jpg";
          },500)
        }else{
          a_img[i].src=arr[time_str[i]];
        }
      }
    },1000);
    function add0(a){
      if(a<10){
        return "0"+a;
      }else{
        return a;
      };
    };
  </script>
</body>
</html>
View Code

代码三：

<!--
Author: XiaoWen
Create a file: 2016-12-12 10:08:02
Last modified: 2016-12-12 12:14:29
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js翻转的时间3</title>
  <style>
    div{
      margin: auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <script>
    document.write('<div id="time_box"></div>');
    var time_box=document.getElementById("time_box");
    var a_img=document.getElementsByTagName("img");
    for(var i=0;i<8;i++){
      time_box.innerHTML+='<img alt="图片' + i + '">';
    };
    var t2;
    var t1=setInterval(function(){
      var time=new Date();
      var time_str=add0(time.getHours())+":"+add0(time.getMinutes())+":"+add0(time.getSeconds());
      var j=0;
      for(var i=0;i<a_img.length;i++){
        a_img[i].src=time_str[i] + ".jpg";
      }
      a_img[2].src="colon.jpg";
      a_img[5].src="colon.jpg";
      setTimeout(function(){
        a_img[2].src="space.jpg";
        a_img[5].src="space.jpg";
      },500);
    },1000);
    function add0(a){
      if(a<10){
        return "0"+a;
      }else{
        return a;
      };
    };
  </script>
</body>
</html>

 

posted @ 2016-12-12 12:30  程序媛李李李李蕾  阅读(1078)  评论(0)  编辑  收藏  举报