驗證碼重新整理三次後，再重新整理的時候提示一分鐘後再操作
阿新 • • 發佈：2021-11-17
前端程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.4.1.js"></script> <!-- 引入 layui.css --> <link rel="stylesheet" href="layui/css/layui.css"> <!-- 引入 layui.js--> <script src="layui/layui.js"></script> </head> <body> <form class="layui-form" action="" onsubmit="return false"> <div class="layui-form-item"> <label class="layui-form-label">驗證碼:</label> <div class="layui-input-inline"><input type="text" name="code" required lay-verify="required" placeholder="請輸入驗證碼" autocomplete="off" class="layui-input"> </div> <div> <img src="/LiuYanCodeServlet" id="yzm" style="height: 37px;width:80px"> <span id="msg">點選圖片重新整理</span> </div> </div> </form> <script > var num = 0; var wait = 60; var pass = true; //驗證碼 點選重新整理 每三次後鎖定60秒 $(function () { var fun = $("#yzm").click(function(){ var time = new Date().getTime(); //選中img標籤，將屬性設定為驗證碼路徑。一定要加隨機數，否則會認為請求相同不做處理 //獲取重新整理次數 if (num < 3) { $(this).attr("src","LiuYanCodeServlet?"+time); $("#msg").text("點選圖片重新整理").css("color","black"); } else { setTimeout(fun,60000); //每次點選60秒後才能再次點選 $("#msg").text("請"+wait+"秒後在重新整理").css("color","red"); pass = false; } console.log('num',num); ++num; }); setInterval(function(){ console.log('wait',wait); console.log('pass',pass); //鎖定 倒計時 if (pass == false) { if(wait==0){ //計時結束，資料恢復 wait = 60; num = 0; pass = true; $("#msg").text("點選圖片重新整理").css("color","black"); }else{ $("#msg").text("請"+wait+"秒後在重新整理").css("color","red"); wait--; } } }, 1000); }); </script> </body> </html>