html如何做验证码

未希 • 2024-04-01 15:17 • 技术教程 • 阅读 72

要创建一个验证码，你可以使用HTML、CSS和JavaScript，以下是一个简单的示例：

（图片来源网络，侵删）

1、创建一个HTML文件，添加一个表格和一个按钮来生成验证码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>验证码示例</title>
    <style>
        table {
            bordercollapse: collapse;
            margin: 20px auto;
        }
        td {
            border: 1px solid black;
            width: 40px;
            height: 40px;
            textalign: center;
            fontsize: 24px;
        }
    </style>
</head>
<body>
    <table id="captchaTable"></table>
    <button onclick="generateCaptcha()">生成验证码</button>
    <script src="captcha.js"></script>
</body>
</html>

2、接下来，创建一个名为captcha.js的JavaScript文件，用于生成验证码：

function generateCaptcha() {
    const table = document.getElementById('captchaTable');
    table.innerHTML = ''; // 清空表格内容
    // 生成随机数并填充表格
    for (let i = 0; i < 5; i++) {
        const row = document.createElement('tr');
        for (let j = 0; j < 6; j++) {
            const cell = document.createElement('td');
            const randomNum = Math.floor(Math.random() * 10);
            cell.textContent = randomNum;
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}

这个示例中，我们创建了一个5行6列的表格，并在每个单元格中生成一个0到9之间的随机数，点击“生成验证码”按钮时，会调用generateCaptcha函数，生成新的验证码。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/419450.html

html如何做验证码

相关推荐

发表回复