您的位置：首页 > Web前端 > JavaScript

可调整倒计时间的JS代码

2014-01-23 20:41 330 查看 
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>


 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航