10、定时器与倒计时
一、定时器
//定时器有两个，setInterval setTimeout ; 他们都属于window下全局方法； //setInterval(callback,毫秒数):每隔一段时间执行一次;关闭定时器用clearInterval //setTimeout(callback,毫秒数)：只能执行一次； 关闭setTimeout用clearTimeout; var n=0; /*var timer=window.setInterval(function(){ if(n==5){ clearInterval(timer) } alert(n++) },0)*/ var timer2=setTimeout(function(){ alert(++n) },1000) // alert(123)
二、倒计时的思路：
倒计时的思路： 1）求出未来距离现在的毫秒数，然后把毫秒数转成秒数，并且取整； 2）秒转换：我们需要计算一天有多少秒：24*60*60=86400 3)字符串拼接 4）函数先调用一次， 定时器调用
三、日期对象
oDate.getTime() 现在距离1970年1月1日 00:00:00 的毫秒数； 即 格林尼治时间；
var oP=document.getElementsByTagName('div')[0]; function getTime(){ var oDate=new Date(); //实例 对象 var y=oDate.getFullYear(); var m=oDate.getMonth()+1; //获取月份的时候，一定要+1； var d=oDate.getDate(); //日期 几号 var week=oDate.getDay();//星期日：0,1,2,3,4,5,6 var h=oDate.getHours(); var min=oDate.getMinutes(); var s=oDate.getSeconds(); var str=h+':'+min+':'+s; oP.innerHTML=str; } getTime(); var timer=setInterval(getTime,1000) /*var ary=['日','一','二','三','四','五','六'] alert('今天星期'+ary[week]);*/
四、时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ font-size: 50px; } p{ display: inline-block; color: red; font-weight: bold; font-size: 80px; } </style> </head> <body> <div>北京时间，下午<p>00:00:00</p></div> <script> var oP=document.getElementsByTagName('p')[0]; //toDou功能：让一位数字，都变成两位； function toDou(n){ //获取两位数 return n>=0 && n<10? '0'+n:''+n; } var str=null; function getTime(){ //1.获取日期对象； var oDate=new Date(); var h=oDate.getHours(); var m=oDate.getMinutes(); var s=oDate.getSeconds(); str=toDou(h)+':'+toDou(m)+':'+toDou(s); //字符串拼接日期 oP.innerHTML=str; } getTime(); //必须先调用一次，否则，页面会出现一秒钟的00:00:00； var timer=setInterval(getTime,1000);//用定时器每隔1000毫秒调用一次getTime； </script> </body> </html>
五、倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ font-size: 40px; } span{ font-size: 60px; color: red; } </style> </head> <body> <div>距离下课还剩<span>00天 00:00:00</span>时间</div> <script> var oSpan=document.getElementsByTagName('span')[0]; function toDou(n){ return n>=0 && n<10? '0'+n :''+n; } function cuntDown(){ var oDate=new Date(); //设置未来时间的时候，一定要用/杠，否则不兼容； var newDate=new Date('2016/9/31 18:00:00'); // alert(newDate.getTime()-oDate.getTime()); var s=Math.floor((newDate-oDate)/1000); if(s<=0){ clearInterval(timer); oSpan.innerHTML='您来晚了，活动已结束'; oSpan.style.color='#ccc' return; } //24*60*60=86400； var d=Math.floor(s/86400); s%=86400; //剩余的秒数； var h=Math.floor(s/3600); s%=3600; var m=Math.floor(s/60); s%=60; oSpan.innerHTML=toDou(d)+'天'+toDou(h)+':'+toDou(m)+':'+toDou(s); } cuntDown(); var timer=setInterval(cuntDown,1000); </script> </body> </html>
