Heim > Artikel > Web-Frontend > js verwendet setTimeout, um Timing*-Methoden_Javascript-Fähigkeiten zu implementieren

js verwendet setTimeout, um Timing*-Methoden_Javascript-Fähigkeiten zu implementieren

WBOYOriginal: 2016-05-16 16:04:501029Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie man setTimeout in js verwendet, um eine Zeitbombe zu implementieren. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Heute habe ich den Blogbeitrag von CSS Exploration Journey gelesen und festgestellt, dass die Verwendung von setTimeout zum Schreiben einer Zeitbombe einen Effekt hatte, also habe ich beschlossen, eine wie eine Katze zu schreiben.

<!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>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert ein einfaches sekundäres Dropdown-Menü_jqueryNächster Artikel：jQuery implementiert ein einfaches sekundäres Dropdown-Menü_jquery

In Verbindung stehende Artikel

Mehr sehen