前一篇:JavaScript中的style.display属性操作后一篇:Javascript算符的优先级介绍

JavaScript 验证码的实例代码(附效果图)

	作者：CC	今阅(1)	3日(1)	7日(1)
	发表时间:2024-04-28 03:31:28		30日(2)	总阅(12)

文章摘要：[验证码示例效果图](https://cdn.jsdelivr.net/gh/chatgpt/asset-hosting/programming/captcha-example.png)你可以将此代码保存为html文件并在浏览器中打开，即可看到验证码示例，以下是一个简单的javascript验证码实例代码：效果图：

以下是一个简单的JavaScript验证码实例代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码示例</title>
<style>
#captcha {
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #ccc;
  padding: 5px;
  display: inline-block;
}

#captchaInput {
  margin-top: 10px;
}
</style>
</head>
<body>
<div id="captcha"></div>
<input type="text" id="captchaInput" placeholder="请输入验证码">
<button onclick="checkCaptcha()">验证</button>

document.getElementById(\'captcha\').innerHTML = captcha;
}

function checkCaptcha() {
  const userInput = document.getElementById(\'captchaInput\').value;
  const generatedCaptcha = document.getElementById(\'captcha\').innerHTML;

if (userInput === generatedCaptcha) {
    alert(\'验证码正确！\');
  } else {
    alert(\'验证码错误，请重试！\');
  }
}

generateCaptcha();
</script>
</body>
</html>
```

效果图：

![验证码示例效果图](https://cdn.jsdelivr.net/gh/chatgpt/asset-hosting/programming/captcha-example.png)

你可以将此代码保存为 HTML 文件并在浏览器中打开，即可看到验证码示例。

前一篇:JavaScript中的style.display属性操作后一篇:Javascript算符的优先级介绍