今天看 css探索之旅 的博客文章,有个用setTimeout写定时炸弹的效果,自己也就照猫画猫来写一个。
"">
div{
width:200px;
height:50px;
margin:30px auto 0;
background:#ccc;
text-align:center;
font:14px/50px arial;
cursor:pointer
}
$("#zha").bind("click",function(){
zha();
})
$("#chai").bind("click",function(){
chai();
})
var time = 5;
var timer = 0;
function zha(){
var text = "倒计时";
text += time--;
$("#zha").text(text);
if(time >=0){
timer = setTimeout(zha,1000);
$("#zha").css("color","black");
$("#chai").show();
}else{
$("#zha").text("爆炸");
$("#zha").css("color","red");
time = 5;
$("#chai").fadeOut();
}
}
function chai(){
clearTimeout(timer);
$("#zha").text("炸弹拆除成功,点击继续");
}
更多信息请查看IT技术专栏