基于JavaScript实现自动更新倒计时效果
实现倒计时效果需要掌握js中的两个知识点:
1、setTimeout函数每隔1秒钟更新秒钟时间
2、Date对象计算时间差
下面贴出元旦倒计时代码
<!DOCTYPEhtml> <html> <head> <title>example.html</title> <metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"> <metahttp-equiv="description"content="thisismypage"> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <!--<linkrel="stylesheet"type="text/css"href="./styles.css">--> <script> //定义计时器,每隔1秒钟调用timer函数 vartimerCount=window.setTimeout("timer()",1000); functiontimer(){ vardate=newDate("2017","1","1","0","0","0"); vardeadlineTime=date.getTime(); varnowDate=newDate(); varnowTime=nowDate.getTime(); vardistTime=deadlineTime-nowTime; //判断是否到达时间期限 if(distTime>0){ vard=Math.floor(distTime/1000/3600/24); varh=Math.floor(distTime/1000/3600%24); varm=Math.floor(distTime/1000/60%60); vars=Math.floor(distTime/1000%60); varstr="距离2017年元旦还有"+d+"天"+h+"时"+m+"分"+s+"秒"; document.getElementById("timeout").innerHTML=str; timerCount=window.setTimeout("timer()",1000); } else{ //到达时间期限的时候清楚计时器; window.clearTimeout(timerCount); alert("时间已到"); } } </script> </head> <body> <pid="timeout"></p> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。