html5&css&js代码 025 验证码生成与验证

html5&css&js代码 025 验证码生成与验证

这段HTML代码实现了一个简单的客户端验证码生成与验证功能。页面上会显示一个验证码图片,用户需要在输入框中输入看到的验证码,然后点击验证按钮进行验证。

一、代码

复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>验证码生成与验证</title>
    <style>
        body {
            font-family: "微软雅黑", sans-serif;
            padding: 10px;
            background: #333333;
            color: #eeeeee;
            display: block;
        }

        h1 {
            text-align: center;
            margin: 100px;
        }

        .contaniner {
            text-align: center;
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            font-size: 1.5em;
        }

        #captchaInput {
            font-size: 2em;
            width: 420px;
        }

        #captchaImg {
            display: block;
            margin: 0 auto;
            width: 1200px;
            height: 300px;
        }

        button {
            font-size: 2em;
        }
    </style>
</head>
<body>
<div class="contaniner">
    <h1>客户端验证码生成与验证</h1>

    <!-- 显示验证码图片 -->
    <img id="captchaImg" alt="Captcha Image">

    <!-- 验证码输入框 -->
    <input type="text" id="captchaInput" placeholder="请输入验证码">

    <!-- 验证按钮 -->
    <button id="validateBtn">验证</button>

    <!-- 重新生成验证码按钮 -->
    <button id="regenerateBtn">重新生成</button>


    <!-- 用于存储验证码信息 -->
    <script>
        let currentCaptchaInfo;

        function generateCaptcha(length = 6) {
            const hexChars = '0123456789ABCDEF';
            let captchaCode = '';

            for (let i = 0; i < length; i++) {
                captchaCode += hexChars[Math.floor(Math.random() * hexChars.length)];
            }

            const canvas = document.createElement('canvas');
            canvas.width = 100;
            canvas.height = 40;

            const ctx = canvas.getContext('2d');

            for (let i = 0; i < captchaCode.length; i++) {
                ctx.font = '22px Arial';
                ctx.fillStyle = '#ff0055';

                const angle = (Math.random() - 0.5) * 90;
                ctx.save();
                ctx.translate(2 + (i * 16), 28);
                ctx.rotate(angle * Math.PI / 180);

                ctx.fillText(captchaCode[i], 0, 0);
                ctx.restore();
            }

            const dataUrl = canvas.toDataURL();

            return {code: captchaCode, imageUrl: dataUrl};
        }

        // 初始化验证码
        window.onload = () => {
            regenerateCaptcha();
        };

        // 生成新的验证码并更新显示
        function regenerateCaptcha() {
            currentCaptchaInfo = generateCaptcha();
            document.getElementById('captchaImg').src = currentCaptchaInfo.imageUrl;
            document.getElementById('captchaInput').value = '';
        }

        // 添加重新生成验证码按钮事件监听
        document.getElementById('regenerateBtn').addEventListener('click', regenerateCaptcha);

        // 验证函数
        function validateCaptcha() {
            const userInput = document.getElementById('captchaInput').value.toUpperCase();
            if (userInput === currentCaptchaInfo.code) {
                alert('验证码正确!');
                // 实际场景下应该清空输入框并重新生成验证码
                regenerateCaptcha();
            } else {
                alert('验证码错误,请重新输入!');
            }
        }

        // 添加验证按钮事件监听
        document.getElementById('validateBtn').addEventListener('click', validateCaptcha);
    </script>
    <h3>
        <br>
        <br>
        HTML+CSS+JavaScript编程配套代码 作者:明月看潮生
    </h3>
</div>
</body>
</html>

二、解释

这段HTML代码实现了一个简单的客户端验证码生成与验证功能。页面上会显示一个验证码图片,用户需要在输入框中输入看到的验证码,然后点击验证按钮进行验证。如果用户输入的验证码与生成的验证码一致,则会弹出"验证码正确!"的提示,否则会弹出"验证码错误,请重新输入!"的提示。用户还可以点击重新生成按钮来生成一个新的验证码。

页面中的JavaScript代码实现了以下功能:
generateCaptcha 函数用于生成指定长度的验证码,并将其以特定的样式绘制到canvas上,最后将验证码和对应的图片数据URL返回。

window.onload 事件中调用 regenerateCaptcha 函数初始化验证码。
regenerateCaptcha 函数用于生成新的验证码并更新显示。

为重新生成验证码按钮添加事件监听器,当按钮被点击时调用 regenerateCaptcha 函数。
validateCaptcha 函数用于验证用户输入的验证码是否与当前生成的验证码一致,如果一致则弹出"验证码正确!"的提示,否则弹出"验证码错误,请重新输入!"的提示。

为验证按钮添加事件监听器,当按钮被点击时调用 validateCaptcha 函数。

相关推荐
拉不动的猪17 分钟前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
烛阴1 小时前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中1 小时前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
鹿九巫2 小时前
【CSS】层叠,优先级与继承(四):层叠,优先级与继承的关系
前端·css
卓怡学长2 小时前
w304基于HTML5的民谣网站的设计与实现
java·前端·数据库·spring boot·spring·html5
鱼樱前端2 小时前
前端必知必会:JavaScript 对象与数组克隆的 7 种姿势,从浅入深一网打尽!
前端·javascript
yzhSWJ2 小时前
Spring Boot中自定义404异常处理问题学习笔记
java·javascript
zyk_5204 小时前
前端渲染pdf文件解决方案-pdf.js
前端·javascript·pdf
大溪地C4 小时前
HTML5 详细学习笔记
笔记·学习·html5
沉迷...5 小时前
手动实现legend 与 echarts图交互 通过js事件实现图标某项的高亮 显示与隐藏
前端·javascript·echarts