Javascript倒计时 支持自定义样式
在上版本改进的,这样控制样式更加灵活。
JS脚本:
1 <script language="javascript" type="text/javascript">
2 var interval = 1000;
3 function ShowCountDown(year, month, day, divname) {
4 var now = new Date();
5 //new Date(年,月,日,时,分,秒)
6 var endDate = new Date(year, month - 1, day, 17, 30);
7 var leftTime = endDate.getTime() - now.getTime();
8 var leftsecond = parseInt(leftTime / 1000);
9 var day1 = Math.floor(leftsecond / (60 * 60 * 24));
10 var hour1 = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
11 var hour = Math.floor((leftsecond - 60 * 60) / 3600);
12 //小时如果不大于0 显示为0
13 if (hour > 0) {
14 }
15 else {
16 hour = 0;
17 }
18 if (day1 < 0) {
19 hour = hour1
20 }
21 var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600) / 60);
22 var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600 - minute * 60);
23 var cc = document.getElementById(divname);
24 //判断是否到活动时间 如果到活动时间 全部默认显示00:00:00
25 if (leftTime > 0) {
26 document.getElementById("daoYear").innerHTML = year + "年";
27 document.getElementById("daoMonth").innerHTML = month + "月";
28 document.getElementById("daoDay").innerHTML = day + "日";
29 document.getElementById("daoji_s").innerHTML = hour + "时";
30 document.getElementById("daoji_f").innerHTML = minute + "分";
31 document.getElementById("daoji_m").innerHTML = second + "秒";
32 }
33 else {
34 document.getElementById("daoYear").innerHTML = "0000" + "年";
35 document.getElementById("daoMonth").innerHTML = "00" + "月";
36 document.getElementById("daoDay").innerHTML = "00" + "日";
37 document.getElementById("daoji_s").innerHTML = "00" + "时";
38 document.getElementById("daoji_f").innerHTML = "00" + "分";
39 document.getElementById("daoji_m").innerHTML = "00" + "秒";
40 }
41 }
42 //showCountDown(年、月、日,Div ID)
43 window.setInterval(function () { ShowCountDown(2010, 08, 13, 'showData'); }, interval);
44 </script>
3 function ShowCountDown(year, month, day, divname) {
4 var now = new Date();
5 //new Date(年,月,日,时,分,秒)
6 var endDate = new Date(year, month - 1, day, 17, 30);
7 var leftTime = endDate.getTime() - now.getTime();
8 var leftsecond = parseInt(leftTime / 1000);
9 var day1 = Math.floor(leftsecond / (60 * 60 * 24));
10 var hour1 = Math.floor((leftsecond - day1 * 24 * 60 * 60) / 3600);
11 var hour = Math.floor((leftsecond - 60 * 60) / 3600);
12 //小时如果不大于0 显示为0
13 if (hour > 0) {
14 }
15 else {
16 hour = 0;
17 }
18 if (day1 < 0) {
19 hour = hour1
20 }
21 var minute = Math.floor((leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600) / 60);
22 var second = Math.floor(leftsecond - day1 * 24 * 60 * 60 - hour1 * 3600 - minute * 60);
23 var cc = document.getElementById(divname);
24 //判断是否到活动时间 如果到活动时间 全部默认显示00:00:00
25 if (leftTime > 0) {
26 document.getElementById("daoYear").innerHTML = year + "年";
27 document.getElementById("daoMonth").innerHTML = month + "月";
28 document.getElementById("daoDay").innerHTML = day + "日";
29 document.getElementById("daoji_s").innerHTML = hour + "时";
30 document.getElementById("daoji_f").innerHTML = minute + "分";
31 document.getElementById("daoji_m").innerHTML = second + "秒";
32 }
33 else {
34 document.getElementById("daoYear").innerHTML = "0000" + "年";
35 document.getElementById("daoMonth").innerHTML = "00" + "月";
36 document.getElementById("daoDay").innerHTML = "00" + "日";
37 document.getElementById("daoji_s").innerHTML = "00" + "时";
38 document.getElementById("daoji_f").innerHTML = "00" + "分";
39 document.getElementById("daoji_m").innerHTML = "00" + "秒";
40 }
41 }
42 //showCountDown(年、月、日,Div ID)
43 window.setInterval(function () { ShowCountDown(2010, 08, 13, 'showData'); }, interval);
44 </script>
Html:
1 <div id="showData">
2 <table>
3 <tr>
4 <td>
5 还有:
6 </td>
7 <td>
8 <div id="daoYear">
9 0000</div>
10 </td>
11 <td>
12 <div id="daoMonth">
13 00</div>
14 </td>
15 <td>
16 <div id="daoDay">
17 00</div>
18 </td>
19 <td>
20 <div id="daoji_s">
21 00</div>
22 </td>
23 <td>
24 <div id="daoji_f">
25 00</div>
26 </td>
27 <td>
28 <div id="daoji_m">
29 00</div>
30 </td>
31 </tr>
32 </table>
33 </div>
2 <table>
3 <tr>
4 <td>
5 还有:
6 </td>
7 <td>
8 <div id="daoYear">
9 0000</div>
10 </td>
11 <td>
12 <div id="daoMonth">
13 00</div>
14 </td>
15 <td>
16 <div id="daoDay">
17 00</div>
18 </td>
19 <td>
20 <div id="daoji_s">
21 00</div>
22 </td>
23 <td>
24 <div id="daoji_f">
25 00</div>
26 </td>
27 <td>
28 <div id="daoji_m">
29 00</div>
30 </td>
31 </tr>
32 </table>
33 </div>
作者:Mr S.R Lee
出处:http://www.cnblogs.com/LeeYongze
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.