金讯教育有一节课讲的是验证码;代码如下：
html:
<label>
<input type="text" />
<span id="yz" style=" background:url(1.png) -10px -15px;width:80px;font-style: italic; height: 20px;border: 1px solid black;display: inline-block;"></span>
<a href="javascript:;" id='btn'>看不清</a>
</label>
js:
// 验证码 数字和字母组成6位 0-9 a-zA-Z
/*
"0" ------ 48 "9"------ 57 48-57
"a"-------97 "z"------122 97-122
"A"-------65 "Z"------90 65-90
48-122
*/
function yzm() {
// 循环六次 每次产生一个随机的数字或字母
var str = "";
for (var i = 0; i < 6; i++) {
var code = rand(48, 122); //这是封装好函数 function rand(min,max) {return Math.round(Math.random()*(max-min))+min;}取48~122随机数
if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122) {
str += String.fromCharCode(code); // Unicode 编码转为一个字符:
console.log(code)
} else {
i--; // 如果条件不符例如弹出60就让 i--重新计算
}
}
return str;
}
$("yz").innerHTML = yzm(); //也是封装好的函数获取id的DOM元素 function $(id) {return document.getElementById(id);}
$("btn").onclick = function () {
$("yz").innerHTML = yzm();
}
代码效果如图： 这样就出现了验证码的效果
