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 相关文章推荐
Ajax 数据请求的简单分析
Apr 05 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
Node调用Java的示例代码
Sep 20 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 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 星际争霸
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
模仿OSO的论坛(一)
2006/10/09 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
详解vue中组件参数
2018/07/09 Javascript
Vue指令指令大全
2019/02/09 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
Zabbix实现微信报警功能
2016/10/09 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python连接mysql方法及常用参数
2020/09/01 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
泰国Robinson百货官网:购买知名品牌的商品
2020/02/08 全球购物
医学生求职自荐书
2014/06/12 职场文书
千手观音观后感
2015/06/03 职场文书
聘任合同书
2015/09/21 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
《比的意义》教学反思
2016/02/18 职场文书