原生js--倒计时

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        .block{
            margin:auto;
            text-align: center;
            font-size: 40px;
        }
        span{
            color: #b466e2;
        }
    </style>
</head>
<body>
<div class="block">
    <span id="years">00 </span>年
    <span id="mouths">00 </span>月
    <span id="days">00 </span>天
    --
    <span id="hours">00 </span>:
    <span id="minutes">00 </span>:
    <span id="seconds">00 </span>:
    <span id="millsseconds">000</span>
</div>
<script>
    window.onload=function(){
        var seconds=document.getElementById("seconds");
        var minutes=document.getElementById("minutes");
        var hours=document.getElementById("hours");

        time=new Date("2022-06-08 12:00:00");
        nexttime=time.getTime();
    }
    setInterval(function(){
        var nowtime=new Date();
        var minus=nexttime-nowtime.getTime();
        var ms=parseInt(minus%1000);
        ms<100&&ms>10?ms="0"+ms:ms<10?ms="00"+ms:ms;
        millsseconds.innerHTML=ms;
        var sec=parseInt(minus/1000);
        var second=sec%60;
        if(second<10){
            second="0"+second;
        }
        seconds.innerHTML=second;
        var minute=parseInt(sec/60)%60;
        if(minute<10){
            minute="0"+minute;
        }
        minutes.innerHTML=minute;
        var hh=sec/3600;
        var hour=parseInt(hh)%24;
        if(hour<10){
            hour="0"+hour;
        }
        hours.innerHTML=hour;
        var day=parseInt(hh/24)%30;
        if(day<10){
            day="0"+day;
        }
        days.innerHTML=day;
        var mouth=parseInt(hh/24/30)%12;
        if(mouth<10){
            mouth="0"+mouth;
        }
        mouths.innerHTML=mouth;
        var year=parseInt(hh/24/30/12);
        if(year<10){
            year="0"+year;
        }
        years.innerHTML=year;
    },1);
</script>
</body>
</html>
猜你喜欢
