Scientific/upload/file/2a347a8e53a1424c88f9b8d9d29acabe.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>验证码</title>
    </head>

    <body>
        <canvas id="identify"></canvas>
        <button id="changeCode">看不清，换一个</button>
    </body>
    <script type="text/javascript">
        class IdentifyCode {
            constructor(canvasId, width, height) {
                this.width = width;
                this.height = height;
                this.canvas = document.querySelector(canvasId);
                this.ctx = this.canvas.getContext("2d");
                this.code = "";
                this.codeRange = [];

                this.generateCodeRange();
                this.freshCode();
            }

            //
            initCanvas() {
                this.canvas.width = this.width;
                this.canvas.height = this.height;
            }

            // 生成随机色
            randomColor() {
                var colorStr = "#";
                for(let i = 0; i < 6; i++) {
                    colorStr += Math.floor(Math.random() * 16).toString(16);
                }
                return colorStr;
            }

            // 生成二维码字母范围
            generateCodeRange() {
                var codeRange = [];
                
                for(let i = "0".charCodeAt(0); i <= "9".charCodeAt(0); i++) {
                    codeRange.push(String.fromCharCode(i));
                }
                this.codeRange = codeRange;
                // return codeRange;
            }

            // 生成四位随机数
            randomCode() {
                this.code = "";
                var len = this.codeRange.length;
                for(let i = 0; i < 4; i++) {
                    this.code += this.codeRange[Math.floor(Math.random() * len)];
                }
            }