技術標籤：javascriptjs

JavaScript實現簡單倒計時

• • • 1.簡單div佈局
    • 2.功能實現

1.簡單div佈局

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

2.功能實現

實現思路：1：60：60，定義好時分秒的遞減條件，即可完成倒計時功能（原生邏輯實現）

 var spins = document.querySelector('.time');
    console.log(spins)
    var box = spins.getElementsByClassName('hour')

    var hour_0 = 1;
    var min_1 = 5
    var min_0 = 9
    var sex_1 = 5
    var sex_0 = 9
 


    var ivt = setInterval(function() {
        box[0].innerHTML = hour_0
        box[1].innerHTML = min_1
        box[2].innerHTML = min_0
        box[3].innerHTML = sex_1
        box[4].innerHTML = sex_0

        sex_0--
        if (sex_0 == -1) {
            sex_0 = 9
            sex_1--
        }

        if (sex_1 == -1) {
            sex_1 = 5
            min_0--
        }

        if (min_0 == -1) {
            min_0 = 9
            min_1--
        }

        if (min_1 == -1) {
            min_1 = 5
            hour_0--
        }

        if (hour_0 == -1) {
            hour_0 = 0
            clearInterval(ivt)
        }

    }, 1000)