基于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。