Klicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.-js-Tutorial-php.cn

Klicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.

小云云

Freigeben： 2018-01-22 13:13:48

Original

2874 Leute haben es durchsucht

Manchmal gibt es beim Senden eines Bestätigungscodes immer eine Countdown-Funktion. Der folgende Editor zeigt Ihnen ein einfaches Beispiel für das Klicken auf eine Schaltfläche zum Senden eines Bestätigungscodes und ein Countdown erscheint. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Beispiele sind wie folgt:

<!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> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
 
var InterValObj; //timer变量，控制时间 
var count = 30; //间隔函数，1秒执行 
var curCount;//当前剩余秒数 
 
function sendMessage() { 
 　curCount = count; 
　　//设置button效果，开始计时 
   $("#btnSendCode").attr("disabled", "true"); 
   $("#btnSendCode").val(curCount + "秒后可重新发送"); 
   InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
　　  
  //请求后台发送验证码 TODO 
 
} 
 
//timer处理函数 
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $("#btnSendCode").removeAttr("disabled");//启用按钮 
        $("#btnSendCode").val("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $("#btnSendCode").val(curCount + "秒后可重新发送"); 
      } 
    } 
</script> 
</head> 
<body> 
    <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p> 
</body> 
</html>

Nach dem Login kopieren

Haben Sie es gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

JS-Implementierung des Countdown-Animationseffekts durch gemeinsame Nutzung von Datumsobjekten

Einfache Mobiltelefonregistrierung zum Senden einer Bestätigung Code-Countdown-Implementierungsmethode

jQuery implementiert die Countdown-Funktion zum Senden von Textnachrichten

Das obige ist der detaillierte Inhalt vonKlicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!