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

一、代码
二、解释

一、代码

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