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 函数。

相关推荐
大莲芒25 分钟前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hyyy1 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
一天睡25小时2 小时前
前端の骚操作代码合集 (二)| 让你的网页变得有趣
前端·javascript
王林不想说话2 小时前
Zustand状态管理库
前端·javascript
清风ai明月2 小时前
vue模板语法中使用冒号: 什么时候使用,什么时候不使用呢?
前端·javascript·vue.js
Enddme2 小时前
带你了解面试常被问到的ES6+的核心新特性
前端·javascript
逆袭的小黄鸭2 小时前
深入剖析 JavaScript 执行上下文:代码运行的幕后机制
前端·javascript·面试
晴殇i2 小时前
抛弃 JavaScript 立即执行函数,这个方案更简洁更优雅
前端·javascript
zoahxmy09292 小时前
Vue3 视频播放与截图功能实现
javascript·vue.js
旧味清欢|2 小时前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6