js图片时间翻转

时间：2016-12-12 14:26:22 阅读：265 评论：0 收藏：0 [点我收藏+]

标签：ima lan work jpg one pac type author htm

技术分享

带素材

代码一：

<!--
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>

js图片时间翻转

标签：ima lan work jpg one pac type author htm

原文地址：http://www.cnblogs.com/daysme/p/6164009.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行