可调整倒计时间的JS代码 

  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>

 

posted @ 2013-12-02 23:02  Zimin  阅读(390)  评论(0)    收藏  举报