HTML-随机验证码函数

<div>
<span>5位验证码</span>
<img src="http://www.bubuko.com/images/arrow_03.png" >
</div>

<script>
//随机验证码：由大小写字母或数字组成
let codeStr = ‘abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789‘;
//先设置一个数组，验证码从中选取随机的5个
//规定验证码长度
let length = 5;
let capcha = document.getElementById(‘capcha‘);
//使用document.getElementById()函数返回指定 id 的第一个节点元素
let change_capcha = document.getElementById(‘change_capcha‘);
//同上
// 用来生成[n,m]随机整数函数
function getRandom(n, m) {
if (n > m) { //确保 n<m
let tmp = n;
n = m;
m = tmp;
}
return parseInt(Math.random() * (m - n + 1) + n);
//Math．random()语句是一个随机函数。利用该函数可以取得[0,1) (左闭右开)之间的随机小数，如果想得到一个大于1的随机               值，则需要再乘以一定的数值来实现。
//parseInt()此函数可以解析一个字符串，并返回一个整数。
}
// 将随机生成的整数下标对应的字母放入span中
function getCode() {
let str = ‘‘;
// 验证码有几位就循环几次
for (let i = 0; i < length; i++) {
let index = getRandom(0, 61);
//[0,61]对应26个大写字母，26个小写字母和10个数字，并作为他们的下标
str += codeStr.charAt(index);
//charAt() 方法可返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与                               string.length 之间，该方法将返回一个空字符串。
}
capcha.innerHTML = str;
// innerHTML 属性设置或返回表格行的开始和结束标签之间的HTML。在这里就是将str的值代替span标签中的“5位验证码”
}
getCode(); // 调用函数，页面刷新也会刷新验证码
// 点击刷新验证码
capcha.onclick = function () {
getCode();
};
// capcha.onclick = getCode;也可以，但注意函数名不要加()
//将getCode()函数绑定到onclick事件上
//点击图片会更换验证码
change_capcha.onclick = function () {
getCode();
};
</script>

HTML-随机验证码函数

原文：https://www.cnblogs.com/rlch/p/15357895.html