[Web]验证码篇二——纯JavaScript实现算术验证码

最新推荐文章于 2023-12-21 15:06:18 发布

哟米 2000

最新推荐文章于 2023-12-21 15:06:18 发布

阅读量921

点赞数

分类专栏： Web 文章标签： javascript 字符串

本文链接：https://blog.csdn.net/weixin_44566432/article/details/106006731

版权

Web 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用JavaScript实现算术验证码，它的实现方式和随机字符串验证码的实现方式基本类似。

一起来通过代码看看到底哪些地方不太一样吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算术验证码</title>
    <style type="text/css">
        .code_a{
            color: #0000ff;
            font-size: 12px;
            text-decoration: none;
            cursor: pointer;
        }
        #cvs{
            cursor: pointer;
        }
    </style>
    <script src="js/l32.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var valicode;
        function changeCode() {
            var cvs = document.getElementById("cvs");
            valicode = drawcode(cvs);
        }
        function valiCode() {
            var code = document.getElementById("inCode").value;
            if (code.toString() === valicode.toString()){
                alert("验证通过");
                return true;
            }else {
                document.getElementById("err").innerHTML = "输入的验证码错误";
                alert("验证不通过");
                changeCode();
                // return false;
            }
        }
        window.onload = changeCode;
    </script>
</head>
<body>
<form >
    <label>验证码：</label>
    <input type="text" id="inCode" name="inCode"/><br/>
    <canvas id="cvs" onclick="changeCode()"></canvas>
    <a class="code_a" onclick="changeCode()">换一张</a><br/>
    <input type="submit" value="登录" onclick="valiCode()" />
</form>
<div style="color:red" id="err"></div>
</body>
</html>

2、js文件

//定义变量
var w = 80;
var h = 24;
var fontsize = h - 6;
var str = "+-*";

//随机生成最大值不超过max的整数
function randInt(max) {
    return Math.floor(Math.random()*100000%max);
}

//生成随机长度的字符串验证码
function randCode(len) {
    var one = randInt(100);
    var two = randInt(100);
    var op = str.charAt(randInt(str.length));
    return ""+one+op+two+"=";
}

//生成随机颜色
function randColor() {
    var r = randInt(256);
    var g = randInt(256);
    var b = randInt(256);
    return "rgb("+r+","+g+","+b+")";
}

//绘制图片
function drawcode(canvas) {
    var valicode = randCode();
    w = 5 + fontsize * valicode.length;

    if (canvas != null && canvas.getContext && canvas.getContext("2d")){
        //设置显示区域
        canvas.style.width = w;
        //设置画板
        canvas.setAttribute("width", w);
        canvas.setAttribute("height", h);
        //设置画笔
        var pen = canvas.getContext("2d");
        //绘制背景
        pen.fillStyle = "rgb(255, 255, 255)";
        pen.fillRect(0,0,w, h);
        //设置水平线位置
        pen.textBaseline = "top";
        //绘制内容
        for (var i=0; i<valicode.length; i++){
            pen.fillStyle = randColor();
            pen.font = "bold " + (fontsize+randInt(3)) + "px 微软雅黑";
            pen.fillText(valicode.charAt(i), 5+fontsize*i, randInt(5));
        }
        //绘制噪音线
        for(var i=0; i<2; i++){
            pen.moveTo(randInt(w)/2, randInt(h));//设置起点
            pen.lineTo(randInt(w), randInt(h));//设置终点
            pen.strokeStyle = randColor();
            pen.lineWidth = 2;//线条粗细
            pen.stroke();
        }
        //substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
        valicode = valicode.substr(0, valicode.length-1);
        //eval()方法，把字符串当表达式处理
        return eval(valicode);
    }
}

主要注意的地方就是将随机生成的算术字符串的=给去掉，并将字符串转换成表达式获取最终结果即为最终正确的验证码。

好啦，就到这里~

哟米 2000

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
[Web]验证码篇二——纯JavaScript实现算术验证码

用JavaScript实现算术验证码，它的实现方式和随机字符串验证码的实现方式基本类似。一起来通过代码看看到底哪些地方不太一样吧~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>算术验证码</title> <style type="text/css"> .code_a{ .
复制链接

扫一扫