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

前端技术 2023/09/07 JavaScript

本文实例讲述了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();
})
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(\"炸弹拆除成功,点击继续\");
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/18183

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案