需求:实现距离2019年过年倒计时展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<style type="text/css">
#box {
font-size: 60px;
margin-top: 200px;
text-align: center;
color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
//定义结束时间
var endDate = new Date('09/10/2018 00:00:00');
//定义当前时间
var currDate = new Date();
//倒计时的秒数
var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000);
runTime();
//定时
var timer = setInterval(runTime,1000);
function runTime(){
//计算包含的天数
var d = Math.floor(seconds / (3600 * 24));
//计算剩余的秒数
var s = seconds - d * 3600 * 24;
//计算包含的小时数
var h = Math.floor(s / 3600);
//计算剩余的秒数
s -= h * 3600;
//计算包含的分钟数
var m = Math.floor(s / 60);
//计算剩余的秒数
s -= m * 60;
//给个位数补0
d = d < 10 ? '0'+d : d;
h = h < 10 ? '0'+h : h;
m = m < 10 ? '0'+m : m;
s = s < 10 ? '0'+s : s;
//拼接字符串
var timeHtml = `❤距离我们认识一周年❤${'<br>'}还有${d}天${h}小时${m}分${s}秒`;
//判断倒计时结束
if (seconds <= 0) {
clearInterval(runTime);
timeHtml = '❤❤❤❤❤';
}
document.querySelector('#box').innerHTML = timeHtml;
seconds--;
}
</script>
</body>
</html>