js使用setTimeout实现定时炸弹的方法

这篇文章主要介绍了js使用setTimeout实现定时炸弹的方法,涉及javascript中setTimeout方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js使用setTimeout实现定时炸弹的方法。分享给大家供大家参考。具体分析如下：

今天看 css探索之旅 的博客文章，有个用setTimeout写定时炸弹的效果，自己也就照猫画猫来写一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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();

})
v
ar 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("炸弹拆除成功,点击继续");

}

</script>

</body>

</html>