<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机生成四位验证码</title>
<style type="text/css">
h1 {
background:green;
width:180px;
height:60px;
color:#fff;
text-align: center;
line-height: 60px;
margin: 100px auto;
border: 2px solid orange;
}
</style>
</head>
<body>
<script type="text/javascript">
var chars=[];
//u从48到57
for (var u=48; u<=57; u++) {
//转为正文压入chars
chars.push(String.fromCharCode(u));
}
//u大写字母从65到90
for (var u=65; u<=90; u++) {
chars.push(String.fromCharCode(u));
}
//u从97到122小写字母
for (var u=97; u<=122; u++) {
chars.push(String.fromCharCode(u));
}
console.log(chars);//查看数组chars中存的字符
//在chars中随机挑选4个字符,组成随机验证码
function getCode() {
var code = [];//声明空数组code
for (var i=0; i<4; i++) {//i从0到<4
//在0-60之间随机产生一个数R
var r=Math.floor(Math.random()*62);
//将chars中r位置的字符压入code中
code.push(chars[r]);
}//(循环结束)
//返回code无缝拼接的结果
return code.join('');
}
//debugger;//必须打开F12才起作用
var code = getCode();
// debugger;
//反复:输入验证码,转为小写后,如果不等于code转为小写的内容
var input;
while((input=prompt('输入验证码:'+code)).toLowerCase() != code.toLowerCase()){
//提示验证码错误,请重新输入
alert('验证码错误,请重新输入!');
code=getCode();//重新生成code
}//(循环退出)
//在页面输出:验证通过!
document.write('<h1>验证通过</h1>');
</script>
</body>
</html>
js随机生成验证码
最新推荐文章于 2023-06-16 13:06:50 发布