原生js实现验证码

效果图:

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin-left: 15px;
            border: 1px solid #000;
            vertical-align: bottom;
        }

        input {
            width: 120px;
            height: 40px;
            vertical-align: bottom;
            border: 1px solid #000;
            text-indent: 5px;
            font-size:20px;
        }

        button {
            cursor: pointer;
        }
    </style>
</head>
<body>
<canvas width="120" height="40"></canvas>
<input type="text" placeholder="验证" autofocus>
<button>提交</button>
<script>
    var mcanvas = document.getElementsByTagName("canvas")[0];
    var minput = document.getElementsByTagName("input")[0];
    var btn = document.getElementsByTagName("button")[0];
    var ctx = mcanvas.getContext("2d");
    var content = "0123456789zxcvbnmasdfghjklqwertyuiop";
    var str = "";
    var str1 = "";
    function reset() {
        //画点
        for (var i = 0; i < 25; i++) {
            ctx.beginPath();
            ctx.fillStyle = randomColor(120, 220);
            ctx.arc(getRandom(2, 118), getRandom(2, 38), 1, 0, Math.PI * 2);
            ctx.fill();
        }
        //画线
        for (var i = 0; i < 3; i++) {
            ctx.beginPath();
            ctx.strokeStyle = randomColor(80, 150);
            ctx.lineWidth = getRandom(1, 2);
            ctx.moveTo(getRandom(5, 30), getRandom(5, 35));
            ctx.lineTo(getRandom(85, 115), getRandom(5, 35));
            ctx.stroke();
        }
        //文字
        for (var i = 0; i < 4; i++) {
            var text = content[getRandom(0, content.length - 1)];
            str += text;
            str1 += text.toUpperCase();
            var dushu = getRandom(-30, 30);
            var youzou = getRandom(0, 10);
            ctx.fillStyle = randomColor(80, 150);
            ctx.font = getRandom(12, 25) + "px '宋体'";
            ctx.textBaseline = "top";

            ctx.translate(youzou + i * 30, 0);
            ctx.rotate(Math.PI / 180 * dushu);
            ctx.fillText(text, 0, 0);
            ctx.rotate(Math.PI / 180 * -dushu);
            ctx.translate(-(i * 30 + youzou), 0);
        }
    }

    reset();
    //判断
    btn.onclick = function () {
        var mValue = minput.value;
        if (mValue == str || mValue == str1) {
            alert("验证通过!!");
            ctx.clearRect(0, 0, 120, 40);
            minput.value = "";
            str = "";
            str1 = "";
            reset();
        } else {
            alert("从新来");
            minput.value = "";
        }
    };
    //数字取值范围
    function getRandom(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    };

    function randomColor(min, max) {
        var r = getRandom(min, max);
        var g = getRandom(min, max);
        var b = getRandom(min, max);
        return "rgb(" + r + "," + g + "," + b + ")"
    };
</script>
</body>
</html>
支持原创!!!!!!!!!!!
原生js实现验证码

效果图:

代码:

猜你喜欢
