suchen

Heim >Web-Frontend >js-Tutorial >Klicken Sie auf die Schaltfläche, um den Bestätigungscode zu senden. Es erscheint ein Countdown.

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

小云云
小云云Original
2018-01-22 13:13:482965Durchsuche

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>

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!

jquery date JS 对象
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：Detaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-InsNächster Artikel：Detaillierte Erläuterung des JQuery-Gesten-Passwort-Plug-Ins

In Verbindung stehende Artikel

Mehr sehen