基于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
热门推荐
10 新年门口花束祝福语简短
11 盘锦结婚祝福语大全简短
12 父母生日祝福语 简短独特
13 家庭恩爱祝福语简短英文
14 高考俄语祝福语大全简短
15 虎年祝福语 诗句唯美简短
16 生日婚礼祝福语简短精辟
17 虎年喝酒拜年祝福语简短
18 教师闺蜜祝福语简短