原生JS製作驗證碼（優化）
阿新 • • 發佈：2019-01-12
<!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>