原生JS制作驗證碼（優化）
阿新 • • 發佈：2019-01-12
set type function ons int value == span 標題
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> </head> <body> 請輸入驗證碼:<input type="text" id="yzm"> <span id="yzm1" style="background: #ccc"></span><br> <button id="btn">驗證</button> <!-- <textarea name="" id="" cols="30" rows="10"></textarea>--> </body> </html> <script> var yzm=document.getElementById("yzm"); //獲取用戶輸入的驗證碼對象 var yzm1=document.getElementById("yzm1");//獲取隨機生成的驗證碼對象 var btn=document.getElementById("btn"); //獲取提交按鈕對象 yzm1.onclick=getyzm; //給span添加點擊事件並賦值 getyzm(); //調用函數 function getyzm(){ var str="123456789qwertyuiopasdfghjklzxcvbnm"; //先定義一個字符串，用來隨機從裏面取值 str=str.split(""); //把這個字符串的元素分割成字符串數組 // console.log(str); var zhi=""; //定義一個空的字符串變量用來取值 for(var i=0;i<4;i++){ //循環四次也就是取四個值 zhi+=str[parseInt(Math.random()*str.length)]; //取隨機數作為下標，+=字符串拼接到值裏面去 } yzm1.innerHTML=zhi; //頁面中賦值 } btn.onclick=function(){ //通過按鈕點擊判斷 var zhi1=yzm.value; var zhi2=yzm1.innerHTML; if(zhi1==zhi2){ alert("對了"); }else{ alert("不對"); } } </script>
原生JS制作驗證碼（優化）