JS做的一个简陋的倒计时效果
如题目所说是一个简陋的，简陋的不能再简陋，写出来主要是自己练练手，高手可以给点指引，新手找找学习JS的感觉。
里面用到多是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=gb2312" />
5 <title>倒计时</title>
6 <style type="text/css">
7
8 </style>
9 <script type="text/javascript">
10 function addLoadEvent(func){
11 var oldonload = window.onload;
12 if (typeof window.onload != "function") {
13 window.onload = func;
14 }
15 else {
16 window.onload = function(){
17 oldonload();
18 func();
19 }
20 }
21 }
22
23
24 function countDown(){
25 var nowDate = new Date();//实例化
26 var nowTime = nowDate.getTime();//获得当前日期的毫秒数
27 var setTime = Date.parse("jun 24,2010");//获得目标日期的毫秒数
28 var eTime = setTime-nowTime; //计算毫秒的差值
29
30 /*下面有点复杂，主要是想获得秒数，但毫秒除1000会出现小数，没有想到取整的办法，后来想用把后三位数字替换为000，结果没有找到这个方法（知道的告诉我一声），
31 后来想到用数组对象的方法将后三位去掉，应该与用000替换后除1000的效果一致，但愿比我还新的新手们能看懂，当然这种方法肯定是不严谨的，日后修改*/
32 var stringTime = eTime.toString(); //转换数据类型
33 var arrayTime = stringTime.split("");//再转换为数组
34 var length = arrayTime.length-3;//这为了获取splice方法的起位置
35 var newArrayTime = arrayTime.splice(length,3);//删除后三位
36 var newStringTime = "";
37 for(var i=0;i<length;i++){
38 newStringTime=newStringTime+arrayTime[i]
39 }
40 //因为再将数组换成整型的时候，数字之间会有逗号，所以用FOR循环将数组拼起来
41
42
43 //后面就是通过获得的秒数来计算分种，小时和天数了
44 var eS = newStringTime%60;//取余得到秒
45 var eM = newStringTime/60;
46 var eM = Math.round(eM)//这次用数学对象的四舍五入的方法来取整，但我们不需要五入，用下面的IF语句将五入的再减去
47 if(eS>=30){
48 eM=eM-1;
49 }
50 var eMM = eM%60;//取余得到分钟，以后的方法就一样了
51 var eH = eM/60;
52 var eH = Math.round(eH);
53 if(eMM>=30){
54 eH=eH-1;
55 }
56 var eD = eH/24;
57 var eH = eH%24;
58 var eD = Math.round(eD);
59 if(eH>=12){
60 eD=eD-1;
61 }
62
63 eS = checkTime(eS);
64 eMM = checkTime(eMM);
65
66 document.getElementById('txt').innerHTML="距离2010年6月23日24时还有："+eD+"天"+eH+"小时"+eMM+"分"+eS+"秒"
67 t=setTimeout('countDown()',1000)
68 }
69 function checkTime(i)
70 {
71 if (i<10)
72 {i="0" + i}
73 return i
74 }
75 addLoadEvent(countDown);
76 </script>
77 </head>
78 <body>
79 <div id="txt" style="color:#f00"></div>
80 </body>
81 </html>
82
浙公网安备 33010602011771号