<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
margin: 0 auto;
position: relative;
background: url(../img/2.jpg) no-repeat 170px 60px;
width: 800px;
height: 422px;
/* border: 1px solid tomato; */
}
.box .box_find{
width: 280px;
height: 50px;
/* border: 1px solid red; */
position: absolute;
left: 300px;
top: 360px;
}
.box .box_find div{
width: 40px;
height: 40px;
float: left;
line-height: 40px;
text-align: center;
color: red;
margin-left: 8px;
background: turquoise;
}
</style>
<script>
window.onload = function(){
var endsec = (new Date("2020,12,31 23:59:59")).getTime();//getTime()将时间格式化为毫秒数----------截止时间
var id = setInterval(sec,1000);
var d=h=m=s=0;
function sec(){
var startsec = (new Date()).getTime();//获取当前时间
var remain = parseInt((endsec-startsec)D/1000);//剩余时间——————当前单位是秒
if(remain>0){//秒杀是否结束
d = parseInt(remain/60/60/24);//获取剩余天数
h = parseInt((remain/60/60)%24);//小时
m = parseInt((remain/60)%60);//分钟
s = parseInt(remain%60);//秒
d = d<10? "0"+d : d;
h = h<10? "0"+h : h;
m = m<10? "0"+m : m;
s = s<10? "0"+s : s;
}else{
clearInterval(id);
d=h=m=s="00";
}
document.getElementById("d").innerHTML= d;
document.getElementById("h").innerHTML= h;
document.getElementById("m").innerHTML= m;
document.getElementById("s").innerHTML= s;
}
}
</script>
</head>
<body>
<div class="box">
<div class="box_find">
<div id="d"></div>
<div id="h"></div>
<div id="m"></div>
<div id="s"></div>
</div>
</div>
</body>
</html>