倒计时（JQuery）

版权声明： https://blog.csdn.net/qq_40999496/article/details/82746063

HTML

<!--倒计时-->
    <div class="timeContainer">
        <p class="timeTitle">距离开播还有</p>
        <ul class="timeContentContainer clear">
            <li class="timeContent">
                <span class="days">00</span>
                <p>DAY</p>
            </li>
            <li class="colon">:</li>
            <li class="timeContent">
                <span class="hours">00</span>
                <p>HOURS</p>
            </li>
            <li class="colon">:</li>
            <li class="timeContent">
                <span class="minutes">00</span>
                <p>MINUTES</p>
            </li>
            <li class="colon">:</li>
            <li class="timeContent">
                <span class="seconds">00</span>
                <p>SECONDS</p>
            </li>
        </ul>
    </div>

CSS

        .timeContainer{
            width: 100%;
            height: 24rem;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0,0,0,0.7);
        }
        .timeTitle{
            text-align: center;
            color: #fff;
            font-size: 1.2rem;
            margin-top: 3rem;
        }
        .timeContentContainer{
            width: 80%;
            color: #fff;
            margin: 3rem auto 0 auto;
        }
        .timeContentContainer>li{
            float: left;
        }
        .timeContent{
            width: 22%;
        }
        .colon{
            font-size: 3rem;
            font-weight: bold;
            line-height: 5rem;
        }
        .days,.hours,.minutes,.seconds{
            display: block;
            width: 100%;
            font-size: 4rem;
            font-weight: bold;
            text-align: center;
        }
        .timeContentContainer>li>p{
            font-size: 1rem;
            text-align: center;
            color: #8e8d8d;
        }

JS

function leftTimer(year,month,day,hour,minute,second){
        var timer = null, //初始化定时器
            leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()), //计算剩余的毫秒数
            days = parseInt(leftTime / 1000 / 60 / 60 / 24  , 10), //计算剩余的天数
            hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10),//计算剩余的小时
            minutes = parseInt(leftTime / 1000 / 60 % 60, 10),//计算剩余的分钟
            seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
        days = checkTime(days);
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        $(".days").html(days);
        $(".hours").html(hours);
        $(".minutes").html(minutes);
        $(".seconds").html(seconds);
    }
    function move() {
        timer =setInterval(function () {
            leftTimer(2018,09,18,11,30,00); // 设定时间
            var day = parseInt($(".days").html()),
                hour = parseInt($(".hours").html()),
                minute = parseInt($(".minutes").html()),
                second = parseInt($(".seconds").html());
            //时间到，timeContainer隐藏 定时器停止
            if( day === 0 && hour === 0&& minute === 0 && second === 0 ){
                $(".timeContainer").css("display","none");
                clearTimeout(timer);
            }
        },1000)
    }
    function checkTime(i){ //将0-9的数字前面加上0，例1变为01
        if(i<10){
            i = "0" + i;
        }
        return i;
    }
    move();

效果图