This article describes the method of using setTimeout to implement a time bomb. Share it for your reference. The specific analysis is as follows:
Today I read the blog post of CSS Exploration Journey. There is a time bomb effect using setTimeout, so I just wrote one by myself.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Untitled Document</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."></script>
</head>
<body>
<div >Start time</div>
<div style="display:none">Dismantle bombs</div>
<script>
$("#zha").bind("click",function(){
zha();
})
$("#chai").bind("click",function(){
chai();
})
var time = 5;
var timer = 0;
function zha(){
var text = "Countdown";
text += time--;
$("#zha").text(text);
if(time >=0){
timer = setTimeout(zha,1000);
$("#zha").css("color","black");
$("#chai").show();
}else{
$("#zha").text("Explosion"); $("#zha").css("color","red");
time = 5;
$("#chai").fadeOut();
}
}
function chai(){
clearTimeout(timer);
$("#zha").text("The bomb is removed successfully, click to continue");}
</script>
</body>
</html>
I hope this article will be helpful to everyone's JavaScript programming.