可调整倒计时间的JS代码

来源：互联网发布：数据可视化怎么学编辑：程序博客网时间：2024/05/01 10:04
  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>
0 0