以下是一个用JavaScript写的登录验证码页面示例：

HTML代码：

<!DOCTYPE html>
<html>


<head>
    <title>Login Captcha</title>
    <script src="captcha.js"></script>
</head>


<body onload="generateCaptcha()">
    <h1>登录验证码</h1>
    <form>
        <label for="input-captcha">请输入下图中的验证码：</label><br>
        <input type="text" id="input-captcha" name="input-captcha"><br>
        <canvas id="captcha-canvas"></canvas><br>
        <button type="submit">提交</button>
    </form>
</body>


</html>

使用javascript实现登录验证码代码

JavaScript代码（文件名为captcha.js）：

var canvas = document.getElementById("captcha-canvas");
var ctx = canvas.getContext("2d");


// 生成随机字符串
function randomString(length) {
    var charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    var result = "";
    for (var i = 0; i < length; i++) {
        result += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    return result;
}


// 生成验证码
function generateCaptcha() {
    var captcha = randomString(6);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.font = "48px Arial";
    ctx.fillText(captcha, 10, 50);
}


// 检查验证码是否正确
function checkCaptcha(inputCaptcha) {
    var captchaCanvas = document.getElementById("captcha-canvas");
    var ctx = captchaCanvas.getContext("2d");
    var imageData = ctx.getImageData(0, 0, captchaCanvas.width, captchaCanvas.height);
    var pixels = imageData.data;
    var captchaText = "";


    // 遍历像素，获取验证码文字
    for (var i = 0; i < pixels.length; i += 4) {
        var r = pixels[i];
        var g = pixels[i + 1];
        var b = pixels[i + 2];
        if (r === 0 && g === 0 && b === 0) {
            captchaText += "1";
        } else {
            captchaText += "0";
        }
    }


    // 检查输入的验证码是否与生成的验证码一致
    if (inputCaptcha === captchaText) {
        alert("验证成功！");
    } else {
        alert("验证码错误，请重新输入！");
        generateCaptcha();
    }
}


// 监听表单提交事件
document.querySelector("form").addEventListener("submit", function (event) {
    event.preventDefault();
    var inputCaptcha = document.getElementById("input-captcha").value;
    checkCaptcha(inputCaptcha);
});

这个页面会在页面加载时自动生成一个随机6位的验证码，并且每次刷新页面都会重新生成验证码。用户需要在文本框中输入验证码并提交，如果验证码正确则提示“验证成功！”，否则提示“验证码错误，请重新输入！”并重新生成验证码。

声明：本站所收录作品、热点评论、图片等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯。内容不代表本网站的观点和立场。请读者仅作参考，并请自行核实相关内容。本站所有图文由于未联系到知识产权人或未发现有关知识产权的登记，所有作品版权归原创作者所有，根据《信息网络传播权保护条例》，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！