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 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
Sep 15 Javascript
Nginx上传文件全部缓存解决方案
Aug 17 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 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提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
python监控进程脚本
2018/04/12 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
优秀学生干部个人事迹材料
2014/06/02 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript