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

2019-11-20 12:43:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：js改变embed标签src值的方法

下一篇：js实现简单选项卡与自动切换效果的方法