JAVASCRIPT 计时器
javascript部分
1 /*----------------------------------------------------------------------------- 2 *作者:cici , email:105466706@qq.com 3 *version:1.0 , 时间：2013-05-23 4 -----------------------------------------------------------------------------*/ 5 timeLib={ 6 timer:null, 7 aNow:null, 8 g_imgHeight:0, 9 g_imgWidth:0, 10 g_iTarget:0, 11 g_iMax:0, 12 g_aImg:[], 13 aTime:[], 14 getByClass:function(oParent,sClass){ 15 var i=0,results=[]; 16 17 var oElements = oParent.getElementsByTagName('*'); 18 for(i=0;i<oElements.length;i++){ 19 if(oElements[i].className==sClass){ 20 results.push(oElements[i]); 21 } 22 } 23 return results; 24 }, 25 start:function(){ 26 var i=0,_this=this,aImg=[], 27 aTime = []; 28 _this.aTime =this.getTime(); 29 aImg=document.getElementsByTagName('img'); 30 for(i=0;i<aImg.length;i++) 31 { 32 if(!isNaN(parseInt(aImg[i].alt))) 33 { 34 _this.g_aImg.push(aImg[i]); 35 } 36 } 37 for(i=0;i<_this.g_aImg.length;i++){ 38 _this.g_aImg[i].now = -1; 39 } 40 _this.showTime(); 41 42 43 _this.g_imgWidth=_this.g_aImg[0].offsetWidth; 44 setInterval(function(){ 45 _this.showTime(); 46 },1000); 47 }, 48 showTime:function(){ 49 var _this = this; 50 _this.aTime =_this.getTime(); 51 _this.g_imgHeight = _this.g_aImg[0].offsetHeight; 52 _this.g_iTarget = -_this.g_imgHeight; 53 _this.g_iMax = _this.g_imgHeight; 54 _this.timer = setInterval(function(){ 55 _this.doSwitch(); 56 },10); 57 }, 58 doSwitch:function(){ 59 var i=0, 60 _this = this, 61 bEnd =false; 62 _this.g_imgHeight -= 5; 63 if(_this.g_imgHeight <= _this.g_iTarget){ 64 _this.g_imgHeight = _this.g_iTarget; 65 bEnd = true; 66 } 67 for(i=0;i<_this.g_aImg.length;i++){ 68 69 if(_this.g_aImg[i].now!=_this.aTime[i]){ 70 71 if(_this.g_imgHeight>0){ 72 73 _this.g_aImg[i].style.height=_this.g_imgHeight+'px'; 74 _this.g_aImg[i].style.width=_this.g_imgWidth+'px'; 75 _this.g_aImg[i].style.top=-(_this.g_iMax-_this.g_imgHeight)/2+'px'; 76 }else{ 77 _this.g_aImg[i].src='images/'+_this.aTime[i]+'.png'; 78 _this.g_aImg[i].style.height = -_this.g_imgHeight+'px'; 79 _this.g_aImg[i].style.width=_this.g_imgWidth+'px'; 80 _this.g_aImg[i].style.top = -(_this.g_iMax+_this.g_imgHeight)/2+'px'; 81 } 82 } 83 } 84 if(bEnd){ 85 for(i=0;i<_this.g_aImg.length;i++){ 86 _this.g_aImg[i].now = _this.aTime[i]; 87 } 88 clearInterval(_this.timer); 89 } 90 }, 91 toLength:function(num,count){ 92 var sNum = num+''; 93 while(sNum.length<count){ 94 sNum = '0'+num; 95 } 96 return sNum; 97 }, 98 getTime:function(){ 99 var date = new Date(), 100 _this = this, 101 results=[], 102 i=0, 103 year = date.getYear(), 104 month = date.getMonth()+1, 105 day = date.getDate(), 106 hour = date.getHours(), 107 minute = date.getMinutes(), 108 second = date.getSeconds(); 109 if(year<1900) 110 { 111 year+=1900; 112 } 113 sTime = _this.toLength(year,4)+_this.toLength(month,2)+_this.toLength(day,2)+_this.toLength(hour,2)+_this.toLength(minute,2)+_this.toLength(second,2); 114 for(i=0;i<sTime.length;i++){ 115 results.push(sTime.charAt(i)); 116 } 117 return results; 118 } 119 }
html5部分
1 <!DOCTYPE> 2 <HTML> 3 <HEAD> 4 <TITLE> 倒计时 </TITLE> 5 <style> 6 * { padding: 0; margin: 0; } 7 .timer{ 8 9 10 margin: 50px auto 0; 11 position:relative; 12 13 } 14 .num{ 15 float:left; 16 width:55px; 17 height:80px; 18 position: relative; 19 20 } 21 img { border: none;position: relative;} 22 .year { text-align: center; padding-top: 30px; } 23 .time { text-align: center; padding: 30px 0; } 24 </style> 25 <script type="text/javascript" src="js/time.js" ></script> 26 <script type="text/javascript"> 27 28 window.onload = function(){ 29 timeLib.start(); 30 } 31 </script> 32 33 </HEAD> 34 35 <BODY> 36 <div class="timer" id="dd"> 37 <div id="year"> 38 <img src="images/0.png" alt="0" /> 39 <img src="images/0.png" alt="0" /> 40 <img src="images/0.png" alt="0" /> 41 <img src="images/0.png" alt="0" /> 42 <img src="images/o.png" alt=":" /> 43 <img src="images/0.png" alt="0" /> 44 <img src="images/0.png" alt="0" /> 45 <img src="images/o.png" alt=":" /> 46 <img src="images/0.png" alt="0" /> 47 <img src="images/0.png" alt="0" /> 48 </div> 49 50 <div id="time"> 51 <img src="images/0.png" alt="0" /> 52 <img src="images/0.png" alt="0" /> 53 <img src="images/o.png" alt=":" /> 54 <img src="images/0.png" alt="0" /> 55 <img src="images/0.png" alt="0" /> 56 <img src="images/o.png" alt=":" /> 57 <img src="images/0.png" alt="0" /> 58 <img src="images/0.png" alt="0" /> 59 </div> 60 </div> 61 </BODY> 62 </HTML>
