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>