今天首先分享一个用js实现倒计时功能的组块。
执行效果如下：
这个功能在实现的时候，比较关键的点，是天、小时、分、秒的计算，时间戳返回的值是从1970年1月1日到截止时间之间的毫秒数。1秒=1000毫秒。记住计算公式即可。另外，需要知道%这个符号的意思是取模，即取余数。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时功能实现</title>
<script>
function countTime() {
var currentDate = new Date(); //Date对象不传参，会自动把当前日期和时间保存为其初始值
var nowStamp = currentDate.getTime(); //时间戳，getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。
//设置截止时间
var timeStr = '2018/02/14 17:00:00';
var endDate = new Date(timeStr);
var endStamp = endDate.getTime();
//求时间差，leftTime是从当前时间到2018/01/01 00:00:00 的时间毫秒数。
var leftTime = endStamp - nowStamp;
//定义变量，存放数字
var d,h,m,s;
var day ; //剩余天数
var hour ;
var minute ;
var second ;
//计算结果，并赋值给变量
if (leftTime>=0){ //大于等于零，表示截止时间还没到
day = Math.floor(leftTime/1000/60/60/24);
hour = Math.floor(leftTime/1000/60/60%24);
minute = Math.floor(leftTime/1000/60%60);
second = Math.floor(leftTime/1000%60);
//将获取到的时间，写入div中
document.getElementById('day').innerHTML = day ;
document.getElementById('hour').innerHTML = hour;
document.getElementById('minute').innerHTML = minute;
document.getElementById('second').innerHTML = second;
//设置定时器，每隔一秒调用此函数
setTimeout(countTime,1000);
}
}
</script>
<style>
body {
margin: 50px;
padding: 0;
}
span {
font-size: 20px;
text-align: center;
}
#bottom{
width: 540px;
margin: 50px auto;
background: #135441;
color: #8eaf95;
padding: 15px 35px 20px 35px;
font-size: 28px;
overflow: hidden;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
behavior: url(PIE.htc);
}
h2 {
font-size: 28px;
font-style: normal;
text-align: center;
font-weight: normal;
color: #b5ddba;
margin-bottom: -15px;
}
#countdown {
font-size: 21px;
margin-top: 30px;
}
.timeBox {
margin-right: 20px;
float: left;
text-align: center;
}
.days, .hours, .minutes, .seconds {
background: #009b6c;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
width: 115px;
text-align: center;
padding: 25px 0;
font-size: 43px;
color: #bb0000;
margin-bottom: 5px;
font-weight: bold;
behavior: url(PIE.htc);
}
#day {
font-size: 43px;
}
#hour {
font-size: 43px;
}
#minute {
font-size: 43px;
}
#second {
font-size: 43px;
}
</style>
</head>
<body onload="countTime()">
<div id="bottom">
<div>
<h2>距离2018年春节放假还有：</h2>
<div id="countdown">
<div class="timeBox">
<div class="days"> <span id="day">00</span></div>
Days
</div>
<div class="timeBox">
<div class="hours"><span id="hour">00</span></div>
Hours
</div>
<div class="timeBox">
<div class="minutes"><span id="minute">00</span></div>
Minutes
</div>
<div class="timeBox">
<div class="seconds"><span id="second">00</span></div>
Seconds
</div>
</div><!-- end countdown -->
</div>
</div>
</body>
</html>