编程 Javascript

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

Posted in Javascript onApril 10, 2015

本文实例讲述了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使用setTimeout实现定时炸弹的方法

- Author -

jingangel

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

你所要知道JS（DHTML）中的一些技巧

Jan 09 Javascript

将string解析为json的几种方式小结

Nov 11 Javascript

Javascript模块化编程(一)模块的写法最佳实践

Jan 17 Javascript

JavaScript栏目列表隐藏/显示简单实现

Apr 03 Javascript

JS实现Enter键跳转及控件获得焦点

Aug 12 Javascript

利用jQuery实现可以编辑的表格

May 26 Javascript

JavaScript获取当前日期是星期几的方法

Apr 06 Javascript

15个常用的jquery代码片段

Dec 19 Javascript

一起学写js Calender日历控件

Apr 14 Javascript

使用jQuery制作遮罩层弹出效果的极简实例分享

May 12 Javascript

vue移动端下拉刷新和上拉加载的实现代码

Sep 08 Javascript

JavaScript Date对象功能与用法学习记录

Apr 28 Javascript

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

Apr 10 #Javascript

js实现星星打分效果的方法

Jul 05 #Javascript

js实现简单的可切换选项卡效果

Apr 10 #Javascript

js使用DOM操作实现简单留言板的方法

Apr 10 #Javascript

js实现简单鼠标跟随效果的方法

Apr 10 #Javascript

js实现交换运动效果的方法

Apr 10 #Javascript

js实现简单的左右两边固定广告效果实例

Apr 10 #Javascript