JS实现倒计时功能
上午主要编写了倒计时的功能，用了两种算法，一种是最终秒数、分钟数、小时数减去当前的秒、分钟和小时，当然要重点注意的就是借位的问题。另一种算法就是将最终时间转换成秒数，当前时间转换成秒数，相减之后再换算成小时、分钟和秒，再分别显示出来。
下面是我编写的代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>倒计时</title> 6 </head> 7 <body> 8 <span id="time"></span> 9 <script src="jquery-1.11.1.js"></script> 10 <script> 11 function Time(){ 12 var date = new Date(); 13 var finalhour = 15; //最终小时 14 var finalmin = 34; 15 var finalsec = 0; 16 var nowhours = date.getHours(); //当前小时 17 var nowmin = date.getMinutes(); 18 var nowsec = date.getSeconds(); 19 var showsec = 0; //显示的秒数 20 var showmin = 0; 21 var showhour = 0; 22 if(nowsec > finalsec){ //如果当前时间的秒数大于最终时间的秒数时， 23 showsec = (finalsec + 60) - nowsec; //用最终的秒数加上60就可以减去当前的秒数，赋值给变量showsec就是剩下的秒数。 24 finalmin = finalmin - 1; // 因为 最终秒数 加上了60s 相当于1分钟，最终分钟就要剪掉1，相当于数学中的借位。 25 }else //如果不大于，就可以直接减去。 26 { 27 showsec = finalsec - nowsec; 28 } 29 if(nowmin > finalmin){ //同理秒， 分钟也是要借位，借小时的，如果借了，小时就减1 分钟就加60之后减去当前分钟 就等于剩余分钟，不借直接减 30 showmin = (finalmin + 60) - nowmin; 31 finalhour = finalhour - 1; 32 }else 33 { 34 showmin = finalmin - nowmin; 35 } 36 showhour = finalhour - nowhours; //小时就直接减，如果被借位了 前面也已经减过了。 37 if(showsec<10){ 38 showsec = "0" + showsec; //如果显示的秒小于10，就在前面加上字符串0. 39 } 40 if(showmin<10){ 41 showmin = "0" + showmin; //同理 42 } 43 if(showhour<10){ 44 showhour = "0" + showhour; 45 } 46 $("#time").html("距离中午12点整还有：" + showhour + "小时" + showmin + "分钟" + showsec + "秒"); 47 } 48 Time(); 49 setInterval(Time,1000); 50 51 52 53 //用都换算成s的算法来计算剩余时间。 54 // var nowSec = nowhours * 3600 + nowmin * 60 + nowsec; 55 // var finalSec = finalhour * 3600 + finalmin * 60 + finalsec; 56 // var restSec = finalSec - nowSec; 57 // var showHour = parseInt(restSec/3600); 58 // var showMin = parseInt((restSec%3600)/60); 59 // var showSec = (restSec%3600)%60; 60 // if(showSec<10){ 61 // showSec = "0" + showSec; 62 // } 63 // if(showMin<10){ 64 // showMin = "0" + showMin; 65 // } 66 // if(showHour<10){ 67 // showHour = "0" + showHour; 68 // } 69 // $("#time").html("距离15点34分还有：" + showHour + "小时" + showMin + "分钟" + showSec + "秒"); 70 // } 71 // Time(); 72 // setInterval(Time,1000); 73 </script> 74 </body> 75 </html>
今天上课讲的一些知识：
1.全局变量是全局对象的属性。
2.像alert()、setInterval()、eval()等都是window的方法。
3.函数中返回值只有一个。
4.如果变量较多，可以定义一个对象，里面存放要定义的变量，需要的时候直接 对象名.属性名()调用。但是真正项目中要封装起来，不允许随便访问。可以用立即执行函数解决权限访问问题。
5.找错，打断点问题，打一个断点的意思就是执行代码直到你断点所在位置，若操作后在前面某个部分停止了，那么就说明停止的那个地方代码执行。
