開發思路:dom
畫出放置驗證碼的模塊、一個寫有「看不清…」的小塊,以及輸入驗證碼的文本框函數
獲取各個模塊字體
封裝一個函數Yan_ma(),設置驗證碼爲8位,裏面含有數字,小寫字母,小寫字母和中文。每種類型出現的可能性爲25%。編碼
隨機數字在0-9,之間。對Math.ramand()向下取整。spa
隨機大小寫字母使用fromCharCode() 方法:將 Unicode 編碼轉爲一個字符,例如:code
var n = String.fromCharCode(65);事件
cosole.log(n);開發
//輸出j結果爲A字符串
大寫字母(65-91) 小寫字母(97-123)io
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 65));
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
隨機中文,聲明變量letter放置中文字符串,使用charAt()隨機在letter中得到某個漢字。
var letter = "如若能夠親愛的請許我青燈墨下執一筆素箋此生爲你吟盡千迴百轉念";
var s = letter.charAt(Math.floor(Math.random() * letter.length));
給每位驗證碼設隨機的顏色,字體大小,相對文本位置,旋轉角度。給顏色封裝一個函數,使用十六進制顏色(如:#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;
}無錫人流多少錢 http://mobile.bhnfkyy.com/
return "#"+s1;
}
隨機位置和隨機旋轉角度的方法相同
隨機位置可能爲向上下左右偏移 8px, 隨機旋轉角度可能爲繞着z軸旋轉(±45度)。
提早聲明一個空字符串 str 讓每位驗證碼用字符串鏈接起來.
var s = String.fromCharCode(Math.floor(Math.random() * 26 + 97));
str+=""+s+"";
arr+=s;
讓8位驗證碼出如今第一個大模塊中的innerHTML中。
給寫有「看不清」的span標籤添加點擊事件,點擊時,調用函數Yan_ma,刷新驗證碼。
若是輸入的驗證碼不正確,則彈出「驗證成功」,不然彈出「驗證失敗」。
看不清...
驗證