js實現隨機8位驗證碼

2019-11-19 11:24:02

字體：大中小

來源：轉載

供稿：網友

開發思路：

1.畫出放置驗證碼的模塊、一個寫有“看不清…”的小塊，以及輸入驗證碼的文本框
2.獲取各個模塊
3.封裝一個函數Yan_ma（），設置驗證碼為8位，里面含有數字，小寫字母，小寫字母和中文。每種類型出現的可能性為25%。
4.隨機數字在0-9，之間。對Math.ramand（）向下取整。
5.隨機大小寫字母使用fromCharCode() 方法：將 Unicode 編碼轉為一個字符，例如：

var n = String.fromCharCode(65);cosole.log(n);//輸出j結果為A

大寫字母（65-91）小寫字母（97-123）

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));

6.隨機中文，聲明變量letter放置中文字符串，使用charAt()隨機在letter中獲得某個漢字。

var letter = "如若可以親愛的請許我青燈墨下執一筆素箋今生為你吟盡千回百轉念";var s = letter.charAt(Math.floor(Math.random() * letter.length));

7.給每位驗證碼設隨機的顏色，字體大小，相對文本位置，旋轉角度。給顏色封裝一個函數，使用十六進制顏色（如：#ffffff）

//隨機顏色 function fontcolor(){    var s1="";    for(var k=0;k<6;k++){     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];     var m=z[Math.floor(Math.random() * z.length)];     s1 +=m;    }    return "#"+s1;   }

隨機位置和隨機旋轉角度的方法相同

隨機位置可能為向上下左右偏移 8px, 隨機旋轉角度可能為繞著z軸旋轉（±45度）。

8.提前聲明一個空字符串 str 讓每位驗證碼用字符串連接起來.

var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>"; arr+=s;

9.讓8位驗證碼出現在第一個大模塊中的innerHTML中。

10.給寫有“看不清”的span標簽添加點擊事件，點擊時，調用函數Yan_ma，刷新驗證碼。

11.如果輸入的驗證碼不正確，則彈出“驗證成功”，否則彈出“驗證失敗”。

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>隨機驗證碼</title> <script>  var arr="";  window.onload=function() {   var maa = document.getElementsByClassName("block")[0];   var looking = document.getElementById("look");   var put = document.getElementById("text");   var btnn = document.getElementById("btn");   Yan_ma(maa);   looking.onclick=function (){    Yan_ma(maa);   };   btnn.onclick=function(){    if(put.value.toLowerCase()==arr.toLowerCase()){     alert ("驗證成功");    }    else{     alert ("驗證失敗");     Yan_ma(maa);    }   }  };    function Yan_ma(aim) {    arr ="";    var str="";    for (var i = 0; i < 8; i++) {     //隨機數 Math.random 0-1 的隨機值     var n = Math.random();     //隨機顏色     var color=fontcolor();     //隨機大小     var size=Math.floor (Math.random ()*12 +20);     //隨機位置     var g=Math.random() <0.5 ? -1: 1;     var topset=Math.random ()*g*8;     //隨機旋轉     var h=Math.random() <0.5 ? -1: 1;     var zhuan=Math.random ()*h*45;     if (n < 0.25) {      //隨機數字      var s = Math.floor(Math.random() * 10);      str+="<span style='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";      arr+=s;     }     //隨機大寫字母 //65-91     else if (n >= 0.25 && n < 0.5) {      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));      str+="<span style='transform:rotatez("+ zhuan +"deg); left:"+topset+"px; color: " +color +";font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";      arr+=s;     }     //隨機小寫字母 97-123     else if (n >=0.5 && n < 0.75) {      var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));      str+="<span style ='transform:rotatez("+ zhuan +"deg);left:"+topset+"px; color: " +color +" ;font-size:"+size+"px ;top:"+topset+"px'>"+s+"</span>";      arr+=s;     }     //隨機文字     else {      var letter = "如若可以親愛的請許我青燈墨下執一筆素箋今生為你吟盡千回百轉念";      var s = letter.charAt(Math.floor(Math.random() * letter.length));      str+="<span style='transform: rotatez("+ zhuan +" deg) ; left:"+topset+"px; color: " +color +";font-size:"+size+"px;top:"+topset+"px '>"+s+"</span>";      arr+=s;     }    }    aim.innerHTML =str;   }   function fontcolor(){    var s1="";    for(var k=0;k<6;k++){     var z=[0,1,2,3,4,5,6,7,8,9,"a","b","c","d","e","f"];     var m=z[Math.floor(Math.random() * z.length)];     s1 +=m;    }    return "#"+s1;   } </script> <style>  .block{   width:250px;   height:60px;   background:url("bg2.png") no-repeat center;   background-size: 100%;   text-align: center;   line-height: 60px;  }  .block span{   position: relative;   display: inline-block;   width:20px;   margin:5px 3px;  }  #look{   color: #9200ff;  }  #look:hover{   cursor: pointer;  } </style></head><body><div class="block"></div><span id="look">看不清...</span><br/><input type="text" id="text" placeholder="請輸入驗證碼" /><button id="btn">驗證</button></body></html>

出現的驗證碼