JavaScript实现简单倒计时

JavaScript实现简单倒计时

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)


猜你喜欢

转载自blog.csdn.net/weixin_43409994/article/details/112031202