倒计时

倒计时

html

<div class="activity-title" id="title">
    <div class="time">
        <div class="time-con">
            <div class="time-num">
            </div>
            <div class="time-desc">
                <div class="desc-span">DAYS</div>
                <div class="desc-span">HOURS</div>
                <div class="desc-span">MINUTES</div>
                <div class="desc-span special">SECONDS</div>
            </div>
        </div>
    </div>
    <div class="apply">
        <a href="javascrip:;" class="apply-btn" id="timeOver"></a>
    </div>
</div>

scss

.activity-title{
    text-align: center;
    margin-top: 40px;
    height: 706px;
    position: relative;
    width: 100%;
    background: url("../img/hackathon_01.jpg") no-repeat center top;
    .time{
        width: 100%;
        height: 70px;
        text-align: center;
        padding-top: 366px;
        .time-con{
            width: 440px;
            height: 70px;
            margin: auto;
            .span-time{
                float: left;
                display: inline-block;
                margin-right: 3px;
                width: 40px;
                height: 70px;
                line-height: 70px;
                font-size: 50px;
                font-weight: bold;
                background-position: center;
                background-image: url("../img/countdown.png");
                background-repeat: no-repeat;
                background-size: cover;
                color: #000;
                &.span-time-space{
                    margin-right: 35px;
                }
            }
            .span-time-span{
                float: left;
                display: inline-block;
                height: 70px;
                line-height: 70px;
                font-size: 32px;
                color: #fff;
                font-weight: bold;
            }
        }
        .time-desc{
            padding-top: 10px;
            width: 440px;
            height: 30px;
            margin: auto;
            .desc-span{
                display: inline-block;
                float: left;
                width: 83px;
                margin-right: 35px;
                font-size: 16px;
                font-weight: bold;
                color: #fff;
            }
            .special{
                margin-right: 0;
            }
        }
    }
    .apply{
        width: 100%;
        text-align: center;
        margin-top: 150px;
        .apply-btn{
            width: 340px;
            height: 70px;
            display: block;
            margin: 0 auto;
            border: none;
            background: url("../img/apply.png") no-repeat 0 0;
            &:hover{
                background-image: url("../img/apply-hover.png");
            }
            &.watch-game{
                background-image: url("../img/watch-game.png");
            }
            &.watch-game:hover{
                background-image: url("../img/watch-game-hover.png");
            }
        }

    }
}

js

var countTime = 0;//倒计时 var countDownTime = '';//时间戳

//观看比赛链接跳转 
if($(this).hasClass('watch-game')){ 
    window.location.href = '/built/homeCase/case.html?categoryId='+arr[0];  return false; 
}

getCountdown();

//获取倒计时时间戳
 function getCountdown(){
    $.ajax({
        url:API.getCountdown,
        type:"get",
    }).done(function(res){
        if(res && res.ok ){
            countDownTime = res.result;
            //倒计时
            showtime();
        }else{
            Util.alertMessage(res.errorMessage ||'出错啦！');
        }
    });
}
//倒计时补零
function addZero(i){
    if(i<10){
        i = "0" + i;
    }
    return i + '';
}
//倒计时
function showtime() {
    var leftTime = parseInt(countDownTime/1000);
    var d = parseInt(leftTime / (24 * 60 * 60));
    var h = parseInt(leftTime / (60 * 60) % 24);
    var m = parseInt(leftTime / 60 % 60);
    var s = parseInt(leftTime % 60);
    d = addZero(d);
    h = addZero(h);
    m = addZero(m);
    s = addZero(s);
    var html = '<div class="span-time">'+ d.split('')[0] +'</div>';
    html += '<div class="span-time span-time-space">'+ d.split('')[1] +'</div>';
    html += '<div class="span-time">'+ h.split('')[0] +'</div>';
    html += '<div class="span-time">'+ h.split('')[1] +'</div>';
    html += '<div class="span-time-span">：</div>';
    html += '<div class="span-time">'+ m.split('')[0] +'</div>';
    html += '<div class="span-time">'+ m.split('')[1] +'</div>';
    html += '<div class="span-time-span">：</div>';
    html += '<div class="span-time">'+ s.split('')[0] +'</div>';
    html += '<div class="span-time">'+ s.split('')[1] +'</div>';
    $(".time-num").html(html);
    if(countDownTime <= 0){
        $(".apply-btn").addClass('watch-game');
        clearTimeout(countTime);
    }else {
        countDownTime -= 1000;
        countTime = setTimeout(showtime,1000);
    }
}