<div class="secKill">
<div class="secKill-title">京東秒殺</div>
<div class="secKill-time">
<div class="secKill-time-title">16:00點場倒計時</div>
<div class="secKill-time-secKill">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</div>
</div>
<script>
let leastTime = +new Date('2020-6-11 16:00:00');
let spanHour = document.querySelector('.secKill-time-secKill > span:nth-child(1)');
let spanMinutes = document.querySelector('.secKill-time-secKill > span:nth-child(2)');
let spanSeconds = document.querySelector('.secKill-time-secKill > span:nth-child(3)');
let updateSecKill = () => {
let nowTime = Date.now();
let time1 = parseInt((leastTime - nowTime) / 1000);
let hours = parseInt(time1 / 3600 % 24);
hours = hours < 10 ? '0' + hours : hours;
let minutes = parseInt(time1 / 60 % 60);
minutes = minutes < 10 ? '0' + minutes : minutes;
let seconds = parseInt(time1 % 60);
seconds = seconds < 10 ? '0' + seconds : seconds;
spanHour.innerHTML = hours;
spanMinutes.innerHTML = minutes;
spanSeconds.innerHTML = seconds;
console.log(time1);
}
updateSecKill();
setInterval(updateSecKill,1000);
</script>
<style>
.secKill {
width:190px;
height:260px;
background-image: url("../img/JDTime.png");
background-size: contain;
background-position: 50%;
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
}
.secKill-title {
color: white;
font-size:30px;
width:100%;
text-align: center;
padding-top:31px;
}
.secKill-time {
width:100%;
}
.secKill-time-title {
color: white;
font-size:20px;
width:100%;
text-align: center;
margin-top:100px;
}
.secKill-time-secKill {
margin-left: auto;
margin-right: auto;
width: 130px;
height: 30px;
margin-top: 10px;
display: block;
}
.secKill-time-secKill > span:nth-child(-n+2) {
float:left;
position: relative;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
margin-right: 20px;
color: white;
font-size: 20px;
}
.secKill-time-secKill > span:last-child {
float:left;
position: relative;
width: 30px;
height: 30px;
text-align: center;
background-color: #2f3430;
color: white;
font-size: 20px;
}
</style>