这里给出两种不同的方法 for循环 和 while循环
First(while循环)
先简单创建一些的样式
<style>
#box{
margin:auto;
display:block;
text-align: center;
color:chocolate;
font-size: 100px;
}
</style>
<body>
<i id="box"></i>
</body>
封装一个函数：每次函数执行 都能得到一个由四个不同字符 组成的字符串
<script>
function fn(){
var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM'
var arr = ''; //造一个空字符串用来接收四位验证码
while(arr.length < 4){
//获取整个字符串的随机整数
var n = Math.round(Math.random()*51);
//先判断 字符串是否有 对应的字符 有的就不拼接
if(arr.indexOf(str[n]====-1){
arr+=str[n];
}
}
return arr;
}
var box = document.getElementById('box')
box.innerHTML = fn4();
box.onclick = function(){
//更新验证码 更新innerHTML
box.innerHTML = fn4()
}
</script>
Second (for循环)
同样先封装一个函数：每次函数执行 都能得到一个由四个不同字符 组成的字符串
<script>
function(){
var str = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASFGHJKLZXCVBNM'
//先创建空字符串存放四位验证码
var arr = '';
for(var i = 0; i < 4 ; i++){
//获取字符串随机整数
var n = var n = Math.round(Math.random()*51)
//判断空字符串中是否存在重复项 保证字符串不能重复
//indexOf
if(arr.indexOf(str[n])====-1){
arr += str[n];
}else{
i--;
}
}
return arr;
} //把得到的字符展示到页面上 每次点击 都要更新一下验证码
var box = document.getElementById('box')
box.innerHTML = fn4();
box.onclick = function(){
//更新验证码 更新innerHTML
box.innerHTML = fn4()
}
</acript>
