JavaScript 春节倒计时

原生js， 2020 年春节倒计时

//布局


        
2020春节倒计时
        

            

                
00
                
Days
            

            

                
00
                
Hours
            

            

                
00
                
Minutes
            

            

                
00
                
Seconds
            
        
    

//css 代码

.container{
    width: 800px;
    height: 400px;
    background-color: rgb(126, 126, 126);
    margin: 50px auto;
    text-align: center;
}

header{
    font-size: 50px;
    color: rgb(251, 255, 0);
}

.boxs{
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}

.box{
    width: 120px;
    height: 120px;
    background: rgb(7, 179, 179);
    color: aliceblue;
    font-size: 40px;
    line-height: 120px;
    border-radius: 10px;
}

.time{
    color: pink;
    font-size: 35px;
}

//JavaScript 代码

//获取元素
let dayEle = document.querySelector('.day');
let hourEle = document.querySelector('.hour');
let minEle = document.querySelector('.min');
let secEle = document.querySelector('.sec');
let _timer;

function nowTime() {

    //得到现在和春节的时间差
    let now = new Date();
    let newyear = new Date("2020-01-25 00:00:00");
    let ms = newyear - now;

    //根据时间差计算 天，时，分，秒
    let days = Math.floor(ms / 1000 / 60 / 60 / 24);
    let hours = Math.floor(ms / 1000 / 60 / 60 % 24).toString().padStart(2, '0');
    let minutes = Math.floor(ms / 1000 / 60 % 60).toString().padStart(2, '0');
    let seconds = Math.floor(ms / 1000 % 60).toString().padStart(2, '0');

    dayEle.innerHTML = days;
    hourEle.innerHTML = hours;
    minEle.innerHTML = minutes;
    secEle.innerHTML = seconds;
}
//定时器
function play() {
    _timer = setInterval(function () {
        nowTime();
    }, 1000);
}
//自动记录时间
play();