倒计时

by Boyanliuu

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>倒计时</title>
    </head>
    <body>
        <section>
            <p> 倒计时</p>
            <div class="countdown">
                <span class="daySpan"></span>
                <span class="hourSpan"></span>
                <span class="minuteSpan"></span>
                <span class="secondSpan"></span>
            </div>

        </section>
    </body>

</html>

CSS

body{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
section{
  width:600px;
  height:200px;
  background:lightblue;
  padding:24px;
  text-align:center;
}
.countdown{
  display:flex;
  justify-content:space-between;
}
span{

  
}

JavaScript

const daySpan =  document.querySelector('.daySpan'),
hourSpan =  document.querySelector('.hourSpan'),
minuteSpan =  document.querySelector('.minuteSpan'),
secondSpan =  document.querySelector('.secondSpan'),
deadline =  new Date('2021-8-08 00:00');


function countDown(){
	const now = new Date(), timeRemaining = deadline - now;
  let day,hour,minute,second;
  if(timeRemaining < 0 ) {return}
  
  //先转换成秒， 除以1000然后 用余数算出来当前是多少秒
  second = Math.floor(timeRemaining/ 1000 % 60) ;
  //先转换成秒， 除以1000然后转换成 分钟 除以60 用余数算出来当前是多少分钟
  minute = Math.floor(timeRemaining/ 1000 / 60 %  60) ;
    //先转换成秒， 除以1000然后转换成 分钟 除以60 然后再除以60 转换成 小时 然后 用余数算出来是多少小时
  hour = Math.floor(timeRemaining/ 1000 / 60 / 60 % 24);
  day = Math.floor(timeRemaining/ 1000 / 60 / 60 /24);
  
  
  daySpan.innerHTML = day + 'days';
  hourSpan.innerHTML = hour + 'hours';
  minuteSpan.innerHTML = minute + 'minutes';
  secondSpan.innerHTML = second + 'seconds';
  
  setTimeout(countDown,1000);
  
}
countDown();