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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • 使用闭包对setTimeout进行简单封装避免出错

    在写js脚本时,经常会用到一些拼写函数的情况,例如调用setTimeout 复制代码 代码如下: var msgalert="test"; function TestAlert(msg) { alert(msg) } $(document).ready(function () { $("#btnCancel").click(function (e) { setTimeout("TestAlert("+msgalert+")",

  • Javascript的setTimeout()使用闭包特性时需要注意的问题

    setTimeout经常被用于延迟执行某个函数,用法为: 复制代码 代码如下: setTimeout(function(){ - }, timeout); 有时为了进行异步处理,而使用setTimeout(function-,0):比如: 复制代码 代码如下: function f(){ - // get ready setTimeout(function(){ -. // do something }, 0);   return -; } 在setTimeout设定的函数处理器之前,函数f返回

  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时 复制代码 代码如下: <scr

  • 定时器(setTimeout/setInterval)调用带参函数失效解决方法

    首先来看下定时器的用法 1. setInterval(code,millisec[,"lang"]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. 参数 描述 code 必需,要调用的函数或要执行的代码串. millisec 必需,周期性执行或调用 code 之间的时间间隔,以毫秒计.2.setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 参数 描述 code 必需,要调用

  • JavaScript setTimeout使用闭包功能实现定时打印数值

    我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧!   注意,如果用setInterval来实现的话,那肯定很简单,这次我们是使用setTimeout.   我们先从最简单思考入手.那就会写出下面的代码. for(var i = 0; i < 5; i++) { setTimeout(console.log(i),i*1000);

  • js 定时器setTimeout无法调用局部变量的解决办法

    javascript中定时器setTimeout的用法一般如下,调用beginrotate之后就进入定时执行rotateloop的一个过程,如下代码: 复制代码 代码如下: var angle = 0; function rotateloop() { if (angle < 360) { angle++; //use angle //...... setTimeout("rotateloop()", 100); } } function beginrotate() { //do

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

    本文实例讲述了js使用setTimeout实现定时炸弹的方法.分享给大家供大家参考.具体分析如下: 今天看 css探索之旅 的博客文章,有个用setTimeout写定时炸弹的效果,自己也就照猫画猫来写一个. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • js中settimeout方法加参数

    js中settimeout方法加参数的使用.简单使用看w3school 里面没有参数调用, 例子: 复制代码 代码如下: <script type="text/javascript"> function timedMsg() { var a ="dd"; var t=setTimeout(function(){ cao(a);},3000) } function cao(a) { alert(a); } </script> </head

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • 关于JS中setTimeout()无法调用带参函数问题的解决方法

    本文实例分析了JS中setTimeout()无法调用带参函数问题的解决方法.分享给大家供大家参考,具体如下: 解决方法:重写setTimeout() 方法,需要用到闭包函数.如下: var _st = window.setTimeout; window.setTimeout = function(fRef, mDelay){ if (typeof fRef == 'function') { var argu = Array.prototype.slice.call(arguments, 2);

  • JS实现霓虹灯文字效果的方法

    JS实现霓虹灯文字效果的方法

    本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html

  • JS关闭窗口与JS关闭页面的几种方法小结

    第一种:JS定时自动关闭窗口<script language="javascript"><!--function closewin(){self.opener=null;self.close();}function clock(){i=i-1document.title="本窗口将在" + i + "秒后自动关闭!";if(i>0)setTimeout("clock();",1000);else clo

  • JS中setTimeout的巧妙用法前端函数节流

    什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

  • js中setTimeout()与clearTimeout()用法实例浅析

    本文实例分析了js中setTimeout()与clearTimeout()用法.分享给大家供大家参考.具体分析如下: setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout. <input type = text id = aaa > <input type = button value = stop id = bb onclick = bb()> <scrip

  • JS中SetTimeout和SetInterval使用初探

    JS中SetTimeout和SetInterval使用初探

    一切尽在代码截图中,愿意和大家一起成长!可以喷,毕竟是菜鸟!  好了,废话不多说了,看具体实例代码吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="wraper">

  • 不同js异步函数同步的实现方法

    不同函数达到同步的函数模拟 funcList是函数执行函数的队列,其中回调函数中flag=true是同步标记量 <script> var flag = false; function funcTest(t,func){ setTimeout(function(){ (function(param){ console.log(param); func(); }(t)); },t*1000); } var funcList = []; funcList.push(function(){funcTe

随机推荐