”领航面试题之验证码设置“

小作业

设计思路

先定义一个字符串数组，再定义一个空字符数组用于储存随机数，使用循环拼接并返回字符；
代码如下：

<script>
//验证码设计函数
const code = document.querySelector('#code')/*声明一个内存地址值不可改变的code，但其变量内部属性可以更改，且只在声明的块级作用域有效，并获取第一个id为code的元素*/
span = document.querySelector('span')//获取为第一个标签名span的元素
function randomNum(){//随机数方法
//定义一个字符串数组
const strArr = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'
//定义一个空字符串
let str=''
//循环拼接字符串
for(let i = 0; i<4 ;i++){
str += strArr.charAt(Math.round(Math.random() * 52))
                         }
//返回拼接字符串
return str
                    }
//测试
console.log(randomNum())
//给盒子添加随机字符串，将获得的验证码加入先前获得到的code中去
code.innerText = randomNum()//
//点击刷新，每点击一次就更新一次
span.onclick = _ =>{
code.innerText = randomNum()
            }
 
 </script>
        

学习到的细节

快捷写法：

span.onclick = _ =>{
                div.innerText = randomNum()
            }//点击span触发这个函数

查阅的资料：

1.详解JS中var、let以及const作用域
2.document.querySelector()方法
3.JavaScript字符串 charAt() 方法
4.关于js中Math.round()方法取整时会用到但实际上我并没有设置数字，它是多余的
5.console.log用于在控制台输出信息，调试非常有用

[特殊问题]（http://t.csdn.cn/TWENy）
解决Cannot set properties of null (setting ‘xxx‘)的问题

本文作者： lllry
本文链接： http://wusterlllry.xyz/2023/03/26/%E2%80%9D2023-0326-%E9%A2%86%E8%88%AA%E9%9D%A2%E8%AF%95%E9%A2%98%E4%B9%8B%E9%AA%8C%E8%AF%81%E7%A0%81%E8%AE%BE%E7%BD%AE%E2%80%9C/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！