原生js倒計時

標籤：display   countdown   mil   span   class   sel   color   cto   art   

<!--倒計時html-->
<a href="#">
    <p>本場剩餘</p>
    <div class="countdown">
        <span></span><i>:</i>
        <span></span><i>:</i>
        <span></span>
    </div>
    <p>查看更多<i> ></i></p>
</a>

/*倒計時css樣式*/
.div1>a>div{
    height: 26px;
    font-size: 0;
    text-align: center;
}
.div1>a>div>span{
    display: inline-block;
    width: 36px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background-color: #392800;
    color: #fff;
    font-size: 20px;
    font-family: "Century Gothic";
    font-weight: bold;
}
.div1>a>div>i{
    display: inline-block;
    width: 16px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #392800;
    font-style: normal;
    position: relative;
    top: -8px;
}

// 倒計時js功能區域
/*——start——*/
/*擷取倒計時地區所有span標籤*/
var span = document.querySelectorAll(".countdown>span");
function countdown() {
    /*擷取當前毫秒數*/
    var dateNewDate = new Date();
    var dateNew = dateNewDate.getTime();
    /*擷取指定時間毫秒數*/
    var dateFutureDate = new Date("2017,8,23,09:00:00");
    var dateFuture = dateFutureDate.getTime();
    /*儲存小時*/
    var hour = parseInt(((dateFuture - dateNew) / 1000 / 60 / 60));//小時
    /*儲存分鐘*/
    var minit = parseInt(((dateFuture - dateNew) / 1000 / 60) - hour * 60);//分鐘
    /*儲存秒*/
    var second = parseInt(((dateFuture - dateNew) / 1000) - hour * 60 * 60 - minit * 60);//秒
    /*少於兩位元補零*/
    if (hour < 10) {
        hour = "0" + hour;
    } else if (minit < 10) {
        minit = "0" + minit;
    } else if (second < 10) {
        second = "0" + second;
    }
    /*輸入*/
    span[0].innerHTML = hour;
    span[1].innerHTML = minit;
    span[2].innerHTML = second;
}
/*設定定時器啟動倒計時*/
setInterval("countdown()", 10);
/*——end——*/

原生js倒計時