1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>可调整倒计时间的JS代码</title> 6 7 </head> 8 <script type="text/javascript"> 9 window.onload=function () 10 { 11 var oFill=document.getElementById('fill_in'); 12 var oInputYear=oFill.getElementsByTagName('input')[0]; 13 var oInputMonth=oFill.getElementsByTagName('input')[1]; 14 var oInputDay=oFill.getElementsByTagName('input')[2]; 15 16 var oBtn=document.getElementById('go'); 17 var oBtn2=document.getElementById('go2'); 18 19 var oTxtDay=document.getElementById('day'); 20 var oTxtHour=document.getElementById('hour'); 21 var oTxtMin=document.getElementById('min'); 22 var oTxtSec=document.getElementById('sec'); 23 var oTxtTarget=document.getElementById('target').getElementsByTagName('strong')[0]; 24 25 var timer=null; 26 27 oBtn2.onclick=function () 28 { 29 timer=setInterval(updateTime, 1000); 30 updateTime(); 31 oTxtTarget.innerHTML=oInputYear.value+"年"+oInputMonth.value+"月"+oInputDay.value+"日"; 32 }; 33 34 function fillZero(num, digit) 35 { 36 var str=''+num; 37 38 while(str.length<digit) 39 { 40 str='0'+str; 41 } 42 43 return str; 44 } 45 46 function updateTime() 47 { 48 var oDateEnd=new Date(); 49 var oDateNow=new Date(); 50 51 var iRemain=0; 52 53 var iDay=0; 54 var iHour=0; 55 var iMin=0; 56 var iSec=0; 57 58 oDateEnd.setFullYear(parseInt(oInputYear.value)); 59 oDateEnd.setMonth(parseInt(oInputMonth.value)-1); 60 oDateEnd.setDate(parseInt(oInputDay.value)); 61 oDateEnd.setHours(0); 62 oDateEnd.setMinutes(0); 63 oDateEnd.setSeconds(0); 64 65 iRemain=(oDateEnd.getTime()-oDateNow.getTime())/1000; 66 67 if(iRemain<=0) 68 { 69 clearInterval(timer); 70 iRemain=0; 71 alert('已过时间'); 72 } 73 74 iDay=parseInt(iRemain/86400); 75 iRemain%=86400; 76 77 iHour=parseInt(iRemain/3600); 78 iRemain%=3600; 79 80 iMin=parseInt(iRemain/60); 81 iRemain%=60; 82 83 iSec=iRemain; 84 85 oTxtDay.innerHTML=fillZero(iDay,3); 86 oTxtHour.innerHTML=fillZero(iHour,2); 87 oTxtMin.innerHTML=fillZero(iMin,2); 88 oTxtSec.innerHTML=fillZero(iSec,2); 89 } 90 91 }; 92 </script> 93 <body> 94 95 <div id="miaov"> 96 <div id="fill_in"> 97 <span>请输入：</span> 98 <input type="text" class="long_text" value="2014" /> 99 <span>年</span> 100 <input type="text" class="text" value="12" /> 101 <span>月</span> 102 <input type="text" class="text" value="22" /> 103 <span class="space3">日</span> 104 </div> 105 106 <a href="javascript:;" id="go" class="go"></a> 107 <a href="javascript:;" id="go2" class="active">开始</a> 108 109 <p id="target"> 110 现在距离 - 111 <strong>2014年12月22日</strong> 112 - 还剩： 113 </p> 114 115 <div id="date"> 116 <span id="day">000</span>天 117 <span id="hour">00</span>小时 118 <span id="min">00</span>分 119 <span id="sec">00</span>秒 120 </div> 121 </div> 122 </body> 123 </html>