Javascript が SMS 認証コードを送信する実装 code_javascript スキル-jsチュートリアル-php.cn

Javascript が SMS 認証コードを送信する実装 code_javascript スキル

WBOY

リリース： 2016-05-16 15:32:46

オリジナル

1909 人が閲覧しました

この記事では、まず携帯電話で確認コードを送信する原理を分析し、次に SMS 確認コードを送信するための JavaScript を実装します。具体的なアイデアは次のとおりです。
「認証コード送信」ボタンをクリックすると、カウントダウンが0秒になるまで「59秒後に再試行」、「58秒後に再試行」…と表示され、その後「認証コード送信」に戻ります。カウントダウン中はボタンは無効になります。

最初のステップ、ボタンを取得し、イベントをバインドし、タイマー変数とタイミング変数を設定します

2 番目のステップは、タイマー を追加することです。タイマーは、タイマーが 0 以下になるとクリアされるまで、1 秒ごとに 1 ずつ減少します。ボタンは「認証コードを送信」に戻り、それ以外の場合は「X 秒後に再試行」と表示されます

レンダリング:

実装コード:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript">
  window.onload=function(){
    var send=document.getElementById('send'),
      times=60,
      timer=null;
    send.onclick=function(){
     // 计时开始
     var that = this;
      this.disabled=true;
      timer = setInterval(function(){
        times --;
        that.value = times + "秒后重试";
        if(times <= 0){
          that.disabled =false;
          that.value = "发送验证码";
          clearInterval(timer);
          times = 60;
        }
        //console.log(times);
      },1000);  
    }  
  } 
  </script>
</head>
<body>
  <input type="button" id="send" value="发送验证码">
</body>
</html>

ログイン後にコピー

注:

ボタンを無効にするかどうかを設定する場合、send.disabled=true;
True と false は引用できません! True と false は引用できません! それ以外の場合、値は常に true になります。
send.setAttribute('disabled','disabled');
を使用することもできます。または send.removeAttribute('disabled');

上記は、JavaScript 経由で SMS 認証コードを送信するためのコードです。あなたの学習に役立つことを願っています。