/*
需求分析:
1 页面打开以后,直接在id是yz的标签里面显示6位的验证码
==>验证码:数字(编码48-57),大写字母(编码65-90),小写字母(编码97-122
2 点击id是btn的标签,重新生成一个6位的验证码,并显示在yz标签里面
技术点:
如果希望js代码在页面加载完成以后再执行,可以使用onload事件
*/
//布局
<form action="">
<table border="1" align='center'>
<td align="right">验证码：</td>
<td><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></td>
</tr>
</table>
</form>
<script>
//生成一个n到m之间的随机整数
function rand(n,m){
return n+parseInt(Math.random()*(m-n+1));
}
//传入元素id,返回指定id元素
function $id(id){
return document.getElementById(id)
}
//生成验证码
function showCode() {
var code = "";
for (var i = 0; i < 6; i++) {
//先让生成的编码在最大的范围里
var num = rand(48, 122);
//再用条件剔除不符合的部分
if ((num > 58 && num < 65) || (num > 90 && num < 97)) {
//i--是为了让这个数重新循环得到(因为不符合就倒退一步重新生成)
i--;
} else {
//num是编码 要变成编码对应的字符串显示
code += String.fromCharCode(num);
}
}
//将得到的code在指定的位置显示 id为yz
// document.getElementById("yz").innerHTML = code;
$id('yz').innerHTML = code;
}
window.onload = function () {
showCode();
// document.getElementById("btn").onclick = showCode;
$id("btn").onclick = showCode;
}
</script>
结果：
点击看不清可以刷新验证码
