首页 > 代码库 > js图片时间翻转
js图片时间翻转
带素材
代码一：
<!--Author: XiaoWenCreate a file: 2016-12-12 10:08:02Last modified: 2016-12-12 11:30:34Start 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>
代码二：
<!--Author: XiaoWenCreate a file: 2016-12-12 10:08:02Last modified: 2016-12-12 12:05:10Start 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>
代码三：
<!--Author: XiaoWenCreate a file: 2016-12-12 10:08:02Last modified: 2016-12-12 12:14:29Start 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图片时间翻转
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。