溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js如何實現隨機8位驗證碼，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
開發思路：
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>出現的驗證碼
當輸入正確驗證碼時
當沒輸入錯誤驗證碼時
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現隨機8位驗證碼”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
