1. 程式人生 > >倒計時完成之後執行alert語句

倒計時完成之後執行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>