验证码案例（16）"/>
生成四位验证码案例（16）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>四位验证码</title><link rel="stylesheet" href="css/reset.min.css"><style>#codeBox {display: inline-block;width: 80px;height: 35px;line-height: 35px;border: 1px solid #AAA;text-align: center;font-size: 18px;letter-spacing: 5px;}#link {display: inline-block;}</style>
</head><body><div id="codeBox"></div><a href="javascript:;" id="link">看不清楚换一张</a><script src="js"></script>
</body></html>/** 生成一个四位随机验证码* * =>数字+字母 （简单）* =>找图片* =>滑动拼图* =>问答类* =>点击汉字拼成语* =>把倒着的文字或者图片正过来* =>...*/
var codeBox = document.getElementById('codeBox'),link = document.getElementById('link');//=>编写一个获取四位随机验证码的方法
function queryCode() {//1.准备验证码获取的范围（索引：0~61）var codeArea = 'qwertyuiopasdfghjklzxcvbnm' +'QWERTYUIOPASDFGHJKLZXCVBNM' +'1234567890';//2.我们只需要准备四个索引,即可在CODE-AREA中通过CHAR-AT方法获取到四个字符,把四个字符串拼接成一个字符串就是我们的验证码var result = '';for (var i = 0; i < 4; i++) {var n = Math.round(Math.random() * 61),//=>*(61-0)+0char = codeArea.charAt(n);result += char;}return result;
}//=>开始加载页面（和点击LINK）需要生成一个验证码
codeBox.innerHTML = queryCode();//=>执行方法,把RETURN返回的四位验证码插入到CODE-BOX盒子中
link.onclick = function () {codeBox.innerHTML = queryCode();
};/*
var codeBox = document.getElementById('codeBox'),link = document.getElementById('link');
*//*function queryCode() {var codeArea = 'qwertyuiopasdfghjklzxcvbnm' +'QWERTYUIOPASDFGHJKLZXCVBNM' +'1234567890';var result = '';for (var i = 1; i <= 4; i++) {var n = Math.round(Math.random() * 61),char = codeArea.charAt(n);//=>生成四个不重复的//=>CHAR当前本次循环找到的字符,这个字符不一定是我们想要的,如果已经在RESULT中存在了,不要这个字符了,重新找if (result.indexOf(char) > -1) {i--;continue;}result += char;}return result;
}*/var codeBox = document.getElementById('codeBox'),link = document.getElementById('link');function queryCode() {var codeArea = 'qwertyuiopasdfghjklzxcvbnm' +'QWERTYUIOPASDFGHJKLZXCVBNM' +'1234567890';var result = '';while (result.length < 4) {var n = Math.round(Math.random() * 61),char = codeArea.charAt(n);if (result.indexOf(char) === -1) {result += char;}}return result;
}codeBox.innerHTML = queryCode();
link.onclick = function () {codeBox.innerHTML = queryCode();
};更多推荐
生成四位验证码案例（16）
发布评论