HTML-随机验证码函数

<div>
        <span id="capcha">5位验证码</span>
        <img src="../images/arrow_03.png" id="change_capcha" >
</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