倒计时完成之后执行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>