1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .fl{ 8 float: left; 9 } 10 img{ 11 display: block; 12 position: relative; 13 } 14 div{ 15 width: 123px; 16 height: 173px; 17 overflow: hidden; 18 } 19 </style> 20 <script> 21 window.onload = function(){ 22 function toDou(n){ 23 return n<10?'0'+n:''+n; 24 } 25 function toMove(obj,value,M){ 26 var aImg = obj.getElementsByTagName('img'); 27 var t=0; 28 var timer=null; 29 if(value<0){value = M-1;} 30 //console.log(value); 31 aImg[0].style.top=aImg[1].style.top=t+'px'; 32 aImg[0].src = 'img/'+value+'.jpg'; 33 aImg[1].src = 'img/'+(value+1)%M+'.jpg'; 34 35 clearInterval(timer); 36 timer = setInterval(function(){ 37 t-=10; 38 aImg[0].style.top=aImg[1].style.top=t+'px'; 39 40 if(t<-163){ 41 clearInterval(timer); 42 } 43 },30); 44 } 45 function time(){ 46 var oDate = new Date(); 47 var oS = oDate.getSeconds(); 48 var oH = oDate.getHours(); 49 var oM = oDate.getMinutes(); 50 var str = toDou(oH)+toDou(oM)+toDou(oS); 51 //console.log(str); 52 for(var i=0;i<str.length;i++){ 53 if(aDiv[i].index != str.charAt(i)){ 54 toMove(aDiv[i],str.charAt(i)-1,arr[i]); 55 //alert(i); 56 } 57 aDiv[i].index = str.charAt(i); 58 } 59 } 60 61 var aDiv = document.getElementsByTagName('div'); 62 var oColon1 = document.getElementById('colon1'); 63 var oColon2 = document.getElementById('colon2'); 64 arr = ['3','4','6','10','6','10']; 65 var onOff = true; 66 67 time(); 68 setInterval(time,1000); 69 setInterval(function(){ 70 onOff=!onOff; 71 72 if(onOff){ 73 oColon1.src=oColon2.src='img/black.jpg'; 74 }else{ 75 oColon1.src=oColon2.src='img/colon.jpg'; 76 } 77 78 },500); 79 }; 80 </script> 81 </head> 82 <body> 83 <div class="fl"> 84 <img src="img/0.jpg" alt=""> 85 <img src="img/0.jpg" alt=""> 86 </div> 87 <div class="fl"> 88 <img src="img/0.jpg" alt=""> 89 <img src="img/0.jpg" alt=""> 90 </div> 91 <img src="img/colon.jpg" alt="" class="fl" id="colon1"> 92 <div class="fl"> 93 <img src="img/0.jpg" alt=""> 94 <img src="img/0.jpg" alt=""> 95 </div> 96 <div class="fl"> 97 <img src="img/0.jpg" alt=""> 98 <img src="img/0.jpg" alt=""> 99 </div> 100 <img src="img/colon.jpg" alt="" class="fl" id="colon2"> 101 <div class="fl"> 102 <img src="img/0.jpg" alt=""> 103 <img src="img/0.jpg" alt=""> 104 </div> 105 <div class="fl"> 106 <img src="img/0.jpg" alt=""> 107 <img src="img/0.jpg" alt=""> 108 </div> 109 </body> 110 </html>
效果图如下
