<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big_box {
position: relative;
width: 190px;
height: 250px;
background: url(./img/jd.png) no-repeat;
}
/* 相同的属性 */
.big_box .box1,.box2,.box3 {
color: #FFFFFF;
font-weight: 700;
position: absolute;
}
/* div位置，字体大小 */
.big_box .box1 {
font-size: 30px;
top: 30px;
left: 32px;
}
/* div位置，字体大小 */
.big_box .box2 {
font-size: 18px;
top: 164px;
left: 24px;
}
/* div位置，字体大小 */
.big_box .box3{
font-size: 20px;
top: 203px;
left: 32px;
}
/* span */
.hour,.minute,.second {
display:inline-block;
width: 26px;
height: 26px;
background-color: #000000;
}
</style>
</head>
<body>
<div class="big_box">
<div class="box1">
京东秒杀
</div>
<div class="box2">
24:00点场 距结束
</div>
<div class="box3">
<span class="hour">1</span> :
<span class="minute">2</span> :
<span class="second">3</span>
</div>
</div>
<script type="text/javascript">
var hour=document.querySelector('.hour');
var minute=document.querySelector('.minute');
var second=document.querySelector('.second');
// 修改结束时间
var inputTime=+new Date('2023-1-19 24:00:00');
countDown();//先调用一次 防止第一次刷新有空白
window.setInterval(countDown,1000);
function countDown(){
var nowTime=+new Date();
var times=(inputTime-nowTime)/1000;
var h=parseInt(times/60/60%24);
h=h<10 ? '0'+h:h;
hour.innerHTML=h;
var m=parseInt(times/60%60);
m=m<10 ? '0'+m:m;
minute.innerHTML=m;
var s=parseInt(times%60);
s=s<10 ? '0'+s:s;
second.innerHTML=s;
}
</script>
</body>
</html>
