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程序设计有所帮助。

Javascript 相关文章推荐
SWFObject Flash js调用类
Jul 08 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
webpack external模块的具体使用
Mar 10 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
js实现拖拽与碰撞检测
Sep 18 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
You might like
php操作mongoDB实例分析
2014/12/29 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
详解vue中组件参数
2018/07/09 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
python修改字典内key对应值的方法
2015/07/11 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
python读写csv文件的方法
2019/08/13 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
市场营销职业生涯规划书范文
2014/01/12 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
部队2015年终工作总结
2015/04/02 职场文书
收银员岗位职责范本
2015/04/07 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang