今天看 css探索之旅 的博客文章,有個用settimeout寫定時炸彈的效果,自己也就照貓畫貓來寫一個。
<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en
>
<html xmlns=>
<head>
<meta http-equiv=content-type content=text/html; charset=gb2312/>
<title>無標題文檔</title>
<style>
div{
width:200px;
height:50px;
margin:30px auto 0;
background:#ccc;
text-align:center;
font:14px/50px arial;
cursor:pointer
}
</style>
<script type=text/javascript src=js/jquery_1.4.2.js></script>
</head>
<body>
<div id=zha>開始定時</div>
<div id=chai style=display:none>拆除炸彈</div>
<script>
$(#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(炸彈拆除成功,點擊繼續(xù));
}
</script>
</body>
</html>