倒计时

倒计时

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);    }}