JavaScript實現驗證碼案例
阿新 • • 發佈:2021-10-27
本文例項為大家分享了實現驗證碼效果的具體程式碼,供大家參考,具體內容如下
今天的案例,效果如下:
這個案例的實現其實沒有很多難點,讓我們一起來看看吧~
html和的實現,在這裡就不做解釋啦,可以比對下面的程式碼自己實現一下,注意一下細節就好了
接著咱們來看看的實現:
我們需要做到的有兩點:
1、實現驗證碼的隨機產生,使其在頁面重新整理和點選更換時能夠生成
2、實現輸入字串和http://www.cppcns.com驗證碼的比較
第一點呢,我們需要用到for迴圈和Math.round(Math.random()*n)
,使得在每一次迴圈中可以產生隨機數字
第二點呢,我們只需要通過input.value
其他的細節可以去程式碼中檢視哦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport客棧" content="width=device-width,initial-scale=1.0"> <title>Document</title> <style> .container{ width: 400px; height: 100px; margin:100px auto; background-color: hsla(180,73%,78%,0.199); border-radius: 20px; text-align: center; padding: 20px; } #check{ display: inline-block; width: 100px; height: 30px; text-align: center; background-color: rgba(128,128,0.158); color:blue; font-size:26px; font-style: italic; letter-spacing: 2px; font-family:Arial,Helvetica,sans-serif; margin-bottom: 10px; } .ma{ swIBYVJmargin-bottom: 12px; } </style> </head> <body> <div class="container"> <div> <span id="check">adf34y</span> <a href="#" rel="external nofollow" id="checka">看不清換一張</a> </div> <div class="ma"> <label for="zheng">驗證碼</label> <input type="text" id="zheng"> </div> <button id="btn">確定</button> </div> <script> let sum=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f']; var check=document.getElementById("check"); var code; function fun(){ let str=""; for(let i=0;i<6;i++){ let pos=Math.round(Math.random()*15);//注意這個寫法,取隨機數 str+=sum[pos]; } check.innerHTML=str; return str; } window.onload=function(){ code=fun(); } let checka=document.getElementById("checka"); checka.onclick=function(){ code=fun(); } let btn=document.getElementById("btn"); btn.onclick=function(){ let t=document.getElementById("zheng").value; console.log(t) if(t==code){ alert("正確"); code=fun(); document.getElementById("zheng").value=""; } else{ alert("錯誤"); document.getElementById("zheng").value=""; } } </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。