<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big_box {
position: relative;
width: 190px;
height: 250px;
background:url(images/jingdong.png) no-repeat;
}
.big_box .box1,.box2,.box3 {
color: #FFFFFF;
font-weight: 700;
position: absolute;
}
.big_box .box1 {
font-size: 30px;
top: 30px;
left: 32px;
}
.big_box .box2 {
font-size: 18px;
top: 164px;
left: 24px;
}
.big_box .box3{
font-size: 20px;
top: 203px;
left: 32px;
}
.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('2022-5-3 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>
扫一扫
04-23
84
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
