京东秒杀倒计时仿写

  <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>