1、數字字母驗證碼(4位)
- 隨機數字[0-9]和字母[A-Za-z]
- 四位
- 在canvas上顯示,將canvas轉爲img標籤顯示在頁面
2、數字問題驗證(100以內的四則運算)
- 隨機0-100的兩個整數
- 隨機加法、減法、乘法
html佈局
<div class="verifyGroup">
<label for="number-ver" class="number-ver">
<input type="text" class="verifyInput" data-vType="number-Verify" id="number-ver">
<span id="noctice" class="noctice"></span>
</label>
<div class="verifyArea">
<div id="verifyNumber" class="verifimg" data-verType="numberVer">
<!-- canvas畫布添加。。。。。 -->
<!-- 四位隨機字母+數字 img -->
</div>
</div>
</div>
<div class="verifyGroup">
<label for="number-ver" class="number-ver">
<input type="text" class="verifyInput" data-vType="number-Verify" id="question-ver">
<span id="noctice2" class="noctice"></span>
</label>
<div class="verifyArea">
<div id="verifyQuest" class="verifimg" data-verType="questionVer">
<!-- canvas畫布添加。。。。。 -->
<!-- 加減乘 問題驗證 img -->
</div>
</div>
</div>
.verifyGroup input{
border: none;
}
.verifyGroup input:focus{
outline: none;
}
.verifyGroup {
width: 280px;
height: 40px;
display: flex;
align-items: center;
border-bottom: 1px solid #71bbee;
}
.number-ver {
position: relative;
display: flex;
width: 200px;
height: 100%;
}
.number-ver span {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
display: block;
z-index: 100;
height: auto;
line-height: 40px;
color: #181818;
font-size: 14px;
}
.verifyInput {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: 90%;
display: flex;
z-index: 101;
background: none;
}
.noctice::after{
content: '請輸入驗證碼';
}
.noticer::after{
content: ' ✅ ';
}
input.verifyInput + span::after{
color: darkgray;
}
input.verifyInput:focus + span::after{
content: '';
}
.verifyArea {
display: flex;
height: inherit;
cursor: pointer;
overflow: hidden;
}
.verifimg{
width: 100px;
height: 40px;
}
創建驗證碼畫布
// 驗證碼畫布
function verifyCanvas(verifyParent, canvasText) {
let canvas = document.createElement("canvas");
let cxt = canvas.getContext("2d");
let _width = parseInt(window.getComputedStyle(verifyParent).width);
let _height = parseInt(window.getComputedStyle(verifyParent).height);
//解決canvas顯示模糊的問題
canvas.width = _width * 2;
canvas.height = _height * 2;
canvas.style.width = _width + 'px';
canvas.style.height = _height + 'px';
canvas.style.backgroundColor = "#eeeeee";
canvas.style.textAlign = "center";
cxt.font = "42px Italy sans-serif";
cxt.fillStyle = "#71bbee";
cxt.textBaseline = "middle";
cxt.textAlign = "center";
cxt.fillText(canvasText, _width, _height);
//將canvas轉爲img
function converImg(canvas) {
let image = new Image();
image.src = canvas.toDataURL("image/png", 1.0);
image.width = canvas.width;
image.height = canvas.height;
image.style.width = _width + 'px';
image.style.height = _height + 'px';
return verifyParent.appendChild(image); //將轉好的img添加到父元素上
}
converImg(canvas);
}
1、數字字母驗證碼(4位)
隨機數字[0-9]和字母[A-Za-z]
//數字+字母的父元素
let verifyParenNum = document.getElementById("verifyNumber");
verifyCanvas(verifyParenNum, vNumbers(4)); // 4位隨機數字字母驗證碼
//vNumbers(len) len:可自定義
//隨機的四位數字和字母
function vNumbers(len) {
let nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
let words = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",
"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
let newNumbers = [];
newNumbers = nums.concat(words); //將字母和數字存儲在一個數組內
let verfiy = new Array(); //空數組,將存隨機的元素
for (let i = 0; ; i++) {
if (verfiy.length < len) {
let j = Math.floor(Math.random() * newNumbers.length);
//隨機的數字和字母新下標
// console.log(j);
verfiy.push(newNumbers[j]);//得到的新下標對應的值添加到數組中
} else {
break;
}
}
let str = verfiy.join(""); //將數組轉爲字符串
NumberVInput(str); //input的value驗證
return str;
}
//input輸入值驗證
function NumberVInput(str) {
let inputNum = document.getElementById("number-ver");
let noctice = document.getElementById("noctice");;
// console.log(noctice)
inputNum.onblur = () => {
// console.log(str);
// console.log(inputNum.value)
if (inputNum.value === str) {
console.log("驗證碼正確");
noctice.classList.add("noticer");
noctice.style.textAlign = "right";
document.getElementsByClassName("verifyGroup")[0].style.borderBottom = "1px solid #71bbee";
} else {
console.log("驗證碼不正確");
noctice.classList.remove("noticer");
noctice.style.color = "red";
noctice.classList.remove("noctice");
document.getElementsByClassName("verifyGroup")[0].style.borderBottom = "1px solid red";
}
}
}
1、加減乘(1-99)問題驗證
加減乘 問題驗證
//畫布父元素
let verifyParentQues = document.getElementById("verifyQuest");
// 數字運算
function questionVer() {
let qverify;
let num = (num) => {
num = Math.floor(Math.random() * 98 + 1); //1-99
return num;
}
let num1 = num(num);
let num2 = num(num);
let doSome = ['x', '+', '-'];
let j = Math.floor(Math.random() * doSome.length);
qverify = num1 + ' ' + doSome[j] + ' ' + num2; //畫布算式
computedVInput(computedVer(num1, num2, doSome[j])); //驗證
return qverify;
}
// 計算
function computedVer(num1, num2, dosomes) {
let sum;
if (dosomes == "x") {
sum = num1 * num2;
} else if (dosomes == "+") {
sum = num1 + num2;
} else if (dosomes == "-") {
sum = num1 - num2;
}
return sum;
}
// 驗證
function computedVInput(sum) {
let inputComputed = document.getElementById("question-ver");
let noctice = document.getElementById("noctice2");
console.log(inputComputed.value);
console.log(sum);
inputComputed.onblur = () => {
if (inputComputed.value == sum) {
console.log("驗證碼正確");
noctice.classList.add("noticer");
noctice.style.textAlign = "right";
document.getElementsByClassName("verifyGroup")[1].style.borderBottom = "1px solid #71bbee";
} else {
console.log("驗證碼不正確");
noctice.classList.remove("noticer");
noctice.style.color = "red";
noctice.classList.remove("noctice");
document.getElementsByClassName("verifyGroup")[1].style.borderBottom = "1px solid red";
}
}
}
- 點擊驗證碼,刷新效果
// 點擊刷新
function refrashBtn(verifyParent) {
verifyParent.onclick = function (event) {
event = event || window.event;
verifyParent.innerHTML = ''; //清空父元素
if (verifyParent == verifyParenNum) { //父元素id判斷
verifyCanvas(verifyParent, vNumbers(4));
} else if (verifyParent == verifyParentQues) {
verifyCanvas(verifyParentQues, questionVer());
}
event.cancelBubble = true;
}
}
refrashBtn(verifyParenNum);
refrashBtn(verifyParentQues);