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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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
星际争霸任务指南——神族
2020/03/04 星际争霸
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
python中的五种异常处理机制介绍
2014/09/02 Python
十个Python程序员易犯的错误
2015/12/15 Python
Python中functools模块函数解析
2017/03/12 Python
Python中str.join()简单用法示例
2018/03/20 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
社区务虚会发言材料
2014/10/20 职场文书
优秀教师个人总结
2015/02/11 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技