190. 定時以後才容許送請求

時間 2019-11-07

標籤定時以後容許請求简体版

原文原文鏈接

1. 用途及效果

用途：提醒用戶倒計時javascript

2.代碼

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>倒計時10s</title>
       <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
   </head>
   <body>
       請輸入驗證碼：<input type="text" /> <span id="checkCode"></span>
       <input type="button" id="btn" value="免費獲取驗證碼" onclick="settime(this)" />
       <script type="text/javascript">
           var countdown=10;//設置多久後從新發送
           function settime(val) {
               if (countdown == 0) {
               val.removeAttribute("disabled");
               val.value="免費獲取驗證碼";
               countdown = 10;

               // window.location.href='https://www.baidu.com/'
               } else {
               val.setAttribute("disabled", true);
               val.value="從新發送(" + countdown + ")";
               countdown--;

               setTimeout(function() {
               settime(val)
               },1000)
               }
           }
       //當用戶點擊了一個按鈕先將驗證碼追加到位置
           $(function(){
               $("#btn").click(function(){
                           var num="";
                           for(var i=0;i<4;i++){
                               num+=Math.floor(Math.random()*10)
                           }
                           //將內容追加在驗證碼位置
                   $("#checkCode").html(num);
                   alert("後臺動態生成驗證碼")
               });

           });
       </script>html