HTML和JS是現(xiàn)代網(wǎng)頁開發(fā)中最為常用的語言之一，而驗(yàn)證碼是保護(hù)網(wǎng)站安全的重要措施。下面是一個(gè)簡單的HTML和JS代碼示例，用于生成驗(yàn)證碼：
<!doctype html>
<html>
<head>
<title>驗(yàn)證碼示例</title>
</head>
<body>
<div id="captcha"></div>
<input type="text" id="captchaInput">
<button onclick="checkCaptcha()">提交</button>
<script>
function generateCaptcha() {
var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var length = 6;
var captcha = '';
for (var i = 0; i < length; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
document.getElementById('captcha').innerHTML = captcha;
}
function checkCaptcha() {
var userInput = document.getElementById('captchaInput').value;
var captcha = document.getElementById('captcha').textContent;
if (userInput === captcha) {
alert('驗(yàn)證成功！');
} else {
alert('驗(yàn)證碼錯誤，請重新輸入！');
document.getElementById('captchaInput').value = '';
generateCaptcha();
}
}
window.onload = function() {
generateCaptcha();
};
</script>
</body>
</html>以上代碼中，通過generateCaptcha函數(shù)生成包含6個(gè)隨機(jī)字符的驗(yàn)證碼，并將其插入到頁面元素captcha中。checkCaptcha函數(shù)用于檢查用戶輸入的驗(yàn)證碼是否正確。若正確則顯示驗(yàn)證成功的提示框，若錯誤則顯示驗(yàn)證碼錯誤的提示框并重新生成驗(yàn)證碼。
通過上述示例可知，HTML和JS是實(shí)現(xiàn)網(wǎng)頁驗(yàn)證碼的重要工具，可以方便而快速地在網(wǎng)站中添加驗(yàn)證碼功能，提升網(wǎng)站的安全性。