该博客内容展示了如何使用JavaScript实现一个四位随机验证码的生成与验证功能。通过点击按钮，文本框中会生成一个随机的四位数字验证码，用户需要在另一个文本框中输入相同的验证码进行验证。如果输入正确，页面将跳转到index.html，否则显示错误提示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>四位随机验证码</title>
<script>
// function yan() {
// var number = document.getElementById("number");
// var num = parseInt(Math.random() * 10000);//有bug.
// //alert(1);
// //alert(num);
// //num = 9527;
// console.log(num);
// number.value = num;
// }
// //yan();
window.onload = function () {
but.onclick = function yan() {//点击事件 触发
var but = document.getElementById("btn");//获取元素
var num = document.getElementById("number");
var numb = num.value;
//console.log(num1);
var html = "";//验证码初始值
for (var i = 0; i < 4; i++) {
html += parseInt(Math.random() * 10);//循环四次 对得出的数字进行拼接
}
// console.log(html);
num.value = html;//写入到文本框中
var but2 = document.getElementById("but2");
var num1 = document.getElementById("number2");
but2.onclick = function () {
var num2 = num1.value;
//console.log(num2);
if (num2 == num.value) { //判断生成的验证码和输入的验证码是否相同
//location.href = "index.html"; //不会在新的窗口打开，会覆盖原网页的内容
window.open("index.html");//在新的网页打开 和a标签的的blank属性相似。
} else {
alert("请带好您的眼镜，谢谢配合。");//提示错误信息
}
}
}
}
</script>
</head>
<body>
<input type="text" id="number">
<input type="button" value="点击生成验证码" id="but" οnclick="yan()">
<br>
<input type="text" id="number2">
<input type="button" value="确定" id="but2">
</body>
</html>
付明旭
7673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
