生成4位大写字母的随机验证码_在页面上随机生成四位存大写字母的验证码

作者：IT思考机器 | 2024-02-01 19:20:08

踩

在页面上随机生成四位存大写字母的验证码

场景题：页面上有一个按钮，点击时在后面显示出一个由4位大写字母组成的随机字符串。（考点：Math方法、字符串下标、点击事件、文本内容操作）


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    
    <button>点击</button><span></span>
    <script>
        let btn = document.querySelector("button");
        let span = document.querySelector("span");
        // 获取26位大写字母
        let arr = [];
        for (let i = 0; i < 26; i++) {
            arr.push(String.fromCharCode(65 + i));//Unicode编码
        }
        let index;//存储索引位置
        btn.addEventListener("click", function () {
            span.textContent = "";
            // 获取4个大写字母
            for (let i = 0; i < 4; i++) {
                index = getRandom(0, arr.length - 1);
                // 使用字符拼接的方式输出到span标签之间
                span.textContent += arr[index];
            }
        })
 
        // 获取随机索引
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
 
    </script>
</body>
 
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/54619

生成4位大写字母的随机 验证码_在页面上随机生成四位存大写字母的验证码

生成4位大写字母的随机验证码_在页面上随机生成四位存大写字母的验证码