JavaScript数字字母验证码+问题验证（canvas转img）图片显示

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);