一、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#box{
position: relative;
top: 100px;
left: 100px;
width: 200px;
height: 65px;
line-height: 65px;
text-align: center;
font-size: 20px;
background: #eff1f2;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
#box:before {
position: absolute;
content: "";
width: 0;
height: 0;
right: 100%;
top: 22px;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #eff1f2;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var fillNumber = function(num) {
let number = Math.floor(num);//向下取整
return number>9?number:'0'+number;
}
var timeChange = function(){
let endDate = new Date('2020-07-10 00:00:00');
let nowDate = new Date();
let leftDate = endDate - nowDate;
if(leftDate<0){
clearInterval(time);//当无剩余时间了,就停止执行timeChange函数
}
//求天时分秒 leftDate是毫秒
let leftSecond = fillNumber(leftDate/1000%60);
let leftMinute = fillNumber(leftDate/(1000*60)%60);
let leftHours = fillNumber(leftDate/(1000*60*60)%24);
let leftDay = fillNumber(leftDate/(1000*60*60)/24);
document.getElementById("box").innerHTML= leftDay+"天"+leftHours+"时"+leftMinute+"分"+leftSecond+"秒";
}
setTimeout(timeChange, 0);//此处作用是为了第一次渲染时,立刻显示剩余时间
var time = setInterval(timeChange, 1000);//每隔一秒,执行ti
</script>
</body>
</html>
二、效果如下图