suchen

Heim  >  Artikel  >  Web-Frontend  >  js-Code zum Implementieren eines 60-Sekunden-Countdowns beim Klicken auf die Schaltflächen_Javascript-Fähigkeiten

js-Code zum Implementieren eines 60-Sekunden-Countdowns beim Klicken auf die Schaltflächen_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:24:292132Durchsuche

Zum Beispiel hat die SMS-Authentifizierungsfunktion auf einigen Websites einen ähnlichen Effekt wie den, dass nach dem Klicken auf die Schaltfläche 60 Sekunden lang heruntergezählt wird, bevor erneut auf „Senden“ geklickt wird.

In diesem Beispiel wird Javascript verwendet, um die Funktion zu implementieren, 60 Sekunden lang herunterzuzählen, bevor erneut auf die Schaltfläche geklickt wird, um nach dem Klicken auf die Schaltfläche den Bestätigungscode zu senden.

Beispiel 1: Javascript implementiert den Effekt, dass man auf die Schaltfläche klickt und 60 Sekunden lang herunterzählt, bevor man erneut klickt, um zu senden 

<input type="button" id="btn" value="免费获取验证码" />
<script type="text/javascript">
var wait=60;
function time(o) {
  if (wait == 0) {
   o.removeAttribute("disabled");   
   o.value="免费获取验证码";
   wait = 60;
  } else { 

   o.setAttribute("disabled", true);
   o.value="重新发送(" + wait + ")";
   wait--;
   setTimeout(function() {
    time(o)
   },
   1000)
  }
 }
document.getElementById("btn").onclick=function(){time(this);}
</script>

Beispiel 2: Klicken Sie auf die Schaltfläche, um den 60-Sekunden-Countdown-JS-Code anzuzeigen

<!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=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery.js"></script> 
</head> 

<body> 
<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> 
<script type="text/javascript"> 
var countdown=60; 
function settime(val) { 
if (countdown == 0) { 
val.removeAttribute("disabled"); 
val.value="免费获取验证码"; 
countdown = 60; 
} else { 
val.setAttribute("disabled", true); 
val.value="重新发送(" + countdown + ")"; 
countdown--; 
} 
setTimeout(function() { 
settime(val) 
},1000) 
} 
</script> 
</body> 
</html>

Beispiel 3: Nachdem Sie auf die Schaltfläche geklickt haben, können Sie nach einem 60-sekündigen Countdown weiter darauf klicken. Der Countdown kann auch auf der Schaltfläche angezeigt werden

Erwartetes Rendering:

Dies ist der Code auf der öffentlichen WeChat-Plattform

function E() {
var e = $("#mobile"), t = (new Date).getTime(), n = Math.floor((t - b) / 1e3);
g && clearTimeout(g), n >= 60 &#63; (e.prop("readonly", !1), y = !0, $("#sendmobile").html("发送验证码").attr("disabled", !1).removeClass("btn_disabled")) : (e.prop("readonly", !0), y = !1, $("#sendmobile").attr("disabled", !0).addClass("btn_disabled").html("%s秒后可重发".sprintf(60 - n)), g = setTimeout(E, 1e3));
}
function S() {
function e() {
if (!y) return;
var e = $.trim(n.val());
l.mobile(e) &#63; t.attr("disabled", !1).removeClass("btn_disabled") : t.attr("disabled", !0).addClass("btn_disabled");
}
var t = $("#sendmobile"), n = $("#mobile");
n.keyup(e).blur(e), e(), t.click(function() {
var e;
t.attr("disabled") !== "disabled" && (e = "+86" + $.trim(n.val()), b = (new Date).getTime(), E(), o.post({
url: w &#63; "/cgi-bin/formbyskey" : "/acct/formbyticket",
data: {
form: "mobile",
action: "set",
f: "json",
mobile: e
},
mask: !1
}, function(e) {
var t = e.BaseResp.Ret;
if (t == 0) u.suc("验证码已经发送"); else {
switch (t) {
case -13:
u.err("登录超时，请重新登录");
break;
case -35:
u.err("该手机已经登记过2次，请使用别的手机号进行用户信息登记");
break;
default:
u.err("验证码发送失败");
}
b = 0;
}
}));
});
}

Der Herausgeber wusste einfach nicht, wie er diesen Code in seinen eigenen Code einbinden sollte. Nach einiger Anleitung von Experten kam er auf einige Hinweise.

Problemlösungsidee des Experten: Wenn es streng ist, sollte dies mit der Hintergrunderfassungszeit kombiniert werden, andernfalls können andere es einfach aktualisieren.
Wenn es nicht streng ist, können Sie auch ein Cookie verwenden. 

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script src="http://yukon12345.com/yukon12345.com/js/jquery.cookie.js"></script>
<script>
 time1=$.cookie("time1")||60;
 time2=$.cookie("time2")||60;
 dis1=$.cookie("dis1")
 dis2=$.cookie("dis2")
 function countDown($obj){

  var time;
  if($obj.attr("id")=="b1")
  {
   time=--time1;
   $.cookie("time1",time,{"expires":1});
   if(time<=0){
    time1=60;
    $obj[0].disabled=!$obj[0].disabled
    clearInterval(inter1)
    $obj.text("点击发送")
    $.cookie("dis1","")
    return
   }
  }
  if($obj.attr("id")=="b2")
  { time=--time2;
   $.cookie("time2",time,{"expires":1});
   if(time<=0){
    time1=60;
    $obj[0].disabled=!$obj[0].disabled
    clearInterval(inter2)
    $obj.text("点击发送")
    $.cookie("dis2","")
    return
   }
  }

  $obj.text(time+"秒后重新发送")

 }

 $(function(){
  if(dis1="dis"){
   $("#b1")[0].disabled='disabled'
   inter1=setInterval(function(){countDown($("#b1"))},1000)
  }
  if(dis2="dis"){
   $("#b2")[0].disabled='disabled'
   inter2=setInterval(function(){countDown($("#b2"))},1000)
  }
$(".cd").bind("click",function(){
 $this=$(this);
 //没有被禁用时禁用并执行倒计时
 if(!$this[0].disabled){
 $this[0].disabled='disabled';
  if($this.attr("id")=="b1"){
   $.cookie("dis1","dis",{"expires":1})
   inter1=setInterval(function(){countDown($this)},1000)
  }
  if($this.attr("id")=="b2"){
   $.cookie("dis2","dis",{"expires":1})
   inter2=setInterval(function(){countDown($this)},1000)
  }

 }
})



})
</script>

<button id="b1" class="cd" >点击发送</button><br>
<button id="b2" class="cd" >点击发送</button><br>

Wenn Sie anhand dieser drei Beispiele Ideen haben, lassen Sie uns diese umsetzen. Ich hoffe, dass sie für alle beim Erlernen der Javascript-Programmierung hilfreich sind.

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：Codebeispielanalyse der JS-Klickschaltfläche zur Implementierung eines Popup-Videoeffekts mit MaskenebeneNächster Artikel：Codebeispielanalyse der JS-Klickschaltfläche zur Implementierung eines Popup-Videoeffekts mit Maskenebene

In Verbindung stehende Artikel

Mehr sehen