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