1:使用dom方式
验 证 码 :
看不清换一张
-
直接页面打开方式
输入验证码 : <input type="text"> <span id="vc"></span> <button id="btn">看不清楚换一张</button>
<script>
var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
// 页面一打开,就先写入一个验证码
vc.innerHTML = setVc(str);
// 每次点击验证码标签,都会刷新验证码
vc.onclick = function(){
vc.innerHTML = setVc(str);
}
// 点击按钮标签,切换验证码
btn.onclick = function(){
vc.innerHTML = setVc(str);
}
// 可以重复的内容
// 生成随机下标,获取随机字母,拼接入字符串
// var vc1 = '';
// for (var i = 0; i <= 5; i++) {
// // 随机数的范围 0 - 最后一个字符的索引下标 0 - str.length-1
// // 每次生成的随机数,也就是随机下标
// var num = parseInt(Math.random() * str.length);
// vc1 += str[num];
// }
// console.log(vc1);
// 生成内容没有重复
// 生成的随机下标,提起的字母,如果不在验证码中,才会写入到验证码中
// 也就是 indexOf()结果是 -1 才执行拼接操作
var vc2 = '';
for (var i = 0; i <= 5; i++) {
var num = parseInt(Math.random() * str.length);
// 获取的字符,不在验证码中,才拼接
// 在 vc2 验证码 中 没有字符 str[num]
// 原理和数组去重是一样的
if (vc2.indexOf(str[num]) == -1) {
// 如果字符不重复,就写入到验证码中
vc2 += str[num];
} else {
// 如果字符重复,没有写入验证码
// 就执行 i-- 重新执行一次循环,获取一个新的字符
// 确保是6位字符
i--;
}
}
console.log(vc2);
// 不重复的验证码方法2
// 判断循环停止的条件是,验证码中有6个字符,循环就停止
// 验证码.length 应该是 6 就停止循环
// 循环次数与循环变量起始可以没有关系
function setVc(ele) {
// 这是函数执行,需要一个数据,最好可以已定义在函数内部,确定调用函数时,这个数据已经被定义了
// var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
var vc3 = '';
// 如果验证码的长度,小于6,就继续循环拼接,如果是6,就停止循环了
while (vc3.length < 6) {
// 生成随机数,是随机索引下标
var num = parseInt(Math.random() * ele.length);
// 判断,如果随机下标对应的字符,没有在验证码中,就执行拼接写入操作
if (vc3.indexOf(ele[num]) == -1) {
vc3 += ele[num];
}
}
return vc3;
}
// 思路
// 1,函数需要使用的数据,最好可以定义在函数内部,便于函数的使用
// 2,定义在函数内部,在函数外部就无法直接使用了
// 如果有其他程序,也需要使用。可以提前先定义好变量
// 将变量作为参数,输入到函数中