倒计时完成之后执行alert语句

现实倒计时完成之后执行alert语句

  本来直接在判断里写了alert语句,后来发现当执行的一秒的时候就会执行,然后点击关闭之后才会变成0秒。然后改成如下这样

  需要了解两点:

  1.  修改innerHTML和页面渲染的问题

     虽然代码是自上而下执行,但是js是单线程的,只有所有代码执行完毕之后,有空闲才会渲染页面。DOM修改是同步的,但是页面的渲染要等主线程空闲;

  2.  定时器的工作机制

     定时器对队列的工作方式是,当特定时间过去后将代码插入。注意,给队列添加代码并不意味着对它立刻执行,而只能表示它会尽快执行;

  结构:     <div class="countDown">倒计时:03分00秒</div>

  js:

  

  <script> 

    var time = 1800                 //    设置成秒

    var timer = setInterval(function(){

      time = time-1;

      var minute = parseInt(time/60);

      if(minute <= 9){

        minute = "0" + minute;

      }    

      var second = parseInt(time%60);

      if(second <= 9){

        second = "0" + second;

      }

      coundDown.innerHTML = "倒计时:"+minute+"分"+second+"秒";

      if(minute == 0 && second == 0){

        setTimeout(function(){

          alert("倒计时结束");

        },0)

        clearInterval(timer);

      }

    },1000)

  </script>

posted @ 2019-01-02 17:59  笨鸟使劲飞  阅读(684)  评论(0编辑  收藏  举报