JS验证码

Posted 2020-08-23 王炜忠

1、引用jquery

2、html页面

 <div>
    <canvas id="canvas" style="cursor: pointer; height: 35px; width: 100px; top: 10px; position: relative;"></canvas>
        <input type="hidden"  id="yzmji" />
        <input type="button" id="a" />
    </div>

View Code

3、JS页面

<script>
    document.getElementById("a").onclick = function () {
        var b = $("#yzmji").val();
        alert(b);

    }

    var _picTxt = "";
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    function randomColor(min, max) {
        var _r = randomNum(min, max);
        var _g = randomNum(min, max);
        var _b = randomNum(min, max);
        return "rgb(" + _r + "," + _g + "," + _b + ")";
    }
    document.getElementById("canvas").onclick = function (e) {
        e.preventDefault();
        drawPic();
        $("#yzmji").val(_picTxt.substr(_picTxt.length - 4, _picTxt.length - 1));
    };
    function drawPic() {
        var $canvas = document.getElementById("canvas");
        var _str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        var _num = 4;
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");
        ctx.textBaseline = "bottom";
        ctx.fillStyle = randomColor(180, 240);
        ctx.fillRect(0, 0, _width, _height);
        for (var i = 0; i < _num; i++) {
            var x = (_width - 10) / _num * i + 10;
            var y = randomNum(_height * 3 / 4, _height);
            var deg = randomNum(-45, 45);
            var txt = _str[randomNum(0, _str.length)];
            _picTxt += txt;
            ctx.fillStyle = randomColor(10, 100);
            ctx.font = randomNum(80, 90) + "px SimHei";
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        for (var i = 0; i < _num; i++) {
            ctx.strokeStyle = randomColor(90, 180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0, _width), randomNum(0, _height));
            ctx.lineTo(randomNum(0, _width), randomNum(0, _height));
            ctx.stroke();
        }
        for (var i = 0; i < _num * 10; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(randomNum(0, _width), randomNum(0, _height), 1, 0, 2 * Math.PI);
            ctx.fill();
        }
        return _picTxt;
    }
    drawPic();
    $("#yzmji").val(_picTxt.substr(_picTxt.length - 4, _picTxt.length));




</script>

View Code

完！