快捷導(dǎo)航

js使用setTimeout實(shí)現(xiàn)定時(shí)炸彈的方法

更新時(shí)間：2015年04月10日 11:57:23 作者：jingangel

這篇文章主要介紹了js使用setTimeout實(shí)現(xiàn)定時(shí)炸彈的方法,涉及javascript中setTimeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js使用setTimeout實(shí)現(xiàn)定時(shí)炸彈的方法。分享給大家供大家參考。具體分析如下：

今天看 css探索之旅的博客文章，有個(gè)用setTimeout寫定時(shí)炸彈的效果，自己也就照貓畫貓來寫一個(gè)。

<!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>無標(biāo)題文檔</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">開始定時(shí)</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 = "倒計(jì)時(shí)";
 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("炸彈拆除成功,點(diǎn)擊繼續(xù)");
}
</script>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)select二級(jí)下拉
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)select二級(jí)下拉效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑
這篇文章主要介紹了詳解BootStrap表單驗(yàn)證中重置BootStrap-select驗(yàn)證提示不清除的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
微信小程序表單彈窗實(shí)例
這篇文章主要為大家詳細(xì)介紹了微信小程序表單彈窗實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
JavaScript 學(xué)習(xí)筆記（五）
今天繼續(xù)學(xué)習(xí)JS中的對(duì)象，昨天內(nèi)置對(duì)象Global對(duì)象和Math對(duì)象，今天繼續(xù)。
2009-12-12
javascript 表單驗(yàn)證常見正則
表單驗(yàn)證正則的代碼，大家可以參考下，可以直接拿來使用，也可以用來學(xué)習(xí)正則。
2009-09-09
用innerHTML?。Ψ?hào)副值給文本框后會(huì)變成＆amp;的方法
用innerHTML?。Ψ?hào)副值給文本框后會(huì)變成＆amp;的方法...
2007-07-07
微信小程序時(shí)間軸組件的示例代碼
這篇文章主要介紹了微信小程序時(shí)間軸組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
微信小程序?qū)崿F(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與反全選及購物車中刪除選中的商品功能,本文通過截圖實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2019-12-12
JavaScript使用delete刪除數(shù)組元素用法示例【數(shù)組長度不變】
這篇文章主要介紹了JavaScript使用delete刪除數(shù)組元素用法,結(jié)合實(shí)例形式分析了delete刪除數(shù)組元素的具體用法與注意事項(xiàng),需要的朋友可以參考下
2017-01-01
Js 時(shí)間函數(shù)getYear()的使用問題探討
不推薦使用getYear()這個(gè)函數(shù)，因?yàn)樵诨鸷酗@示是不正確的，所以推薦使用getFullYear() 函數(shù)，接下來為大家詳細(xì)介紹下getYear函數(shù)在不同瀏覽下的使用問題
2013-04-04