1. 程式人生 > >移動端 促銷倒計時

移動端 促銷倒計時

促銷倒計時 HTML 部分

			<div class="time">
                            <span>0</span>
                            <span>1</span>
                            <span>:</span>
                            <span>0</span>
                            <span>1</span>
                            <span>:</span>
                            <span>0</span>
                            <span>0</span>
                         </div>

JS部分

var downTime = function() {
    var spans = document.querySelector('.time').querySelectorAll('span');
    // 倒計時還有2個小時
    var time = 2 * 60 * 60;
    var timer = setInterval(function() {
        time--;
        // 格式化 h m s
        var h = Math.floor(time / 3600);
        var m = Math.floor(time % 3600 / 60);
        var s = time % 60;
        // 渲染資料
        spans[0].innerHTML = Math.floor(h / 10);
        spans[1].innerHTML = h % 10;
        spans[3].innerHTML = Math.floor(m / 10);
        spans[4].innerHTML = m % 10;
        spans[6].innerHTML = Math.floor(s / 10);
        spans[7].innerHTML = s % 10;
        // 停止計時
        if (time <= 0) {
            clearInterval(timer);
        }

    }, 1000);
};