for和while实现无重复四位验证码

一只桃子~

于 2021-08-19 17:52:45 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/qq_43405603/article/details/119807844

版权

JavaScript 随机数验证码事件监听字符串操作

关键词由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code{
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #333;
        }
        button{
            margin-top:30px;
        }
    </style>
</head>
<body>
    <div id="code"></div>
    <button id="btn">获取验证码</button>
</body>
</html>
<script>
//点击button,出现四位随机数
//验证码长度：4位
//组合：数字（0-9），字母（大小写）
 var code=document.getElementById("code");//获取验证码输入框
 var btn=document.getElementById("btn");//获取按钮
 var str="qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890"
 function getCode(str){
   //转大写，用random
     var res="";
     for(var i=0;i<4;i++){
         //四舍五入    随机的     长度内的
     var index=Math.round(Math.random()*(str.length-1));
     res+=str[index];
}
return res;
}
code.innerHTML=getCode(str)//默认给一个
btn.onclick=function(){
    code.innerHTML=getCode(str)
}
</script>




---------------------------------------while也能实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #code {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #333;
        }

        button {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div id="code"></div>
    <button id="btn">获取验证码</button>
</body>

</html>
<script>
    var code=document.getElementById("code");
    var btn=document.getElementById("btn");
    var str="qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890";
    function getCode(){
        var res='';
        while(res.length<4){
           var index=Math.round(Math.random()*(str.length-1));
           if(res.indexOf(str[index])==-1){//==-1说明没有此项，就加上
              res+=str[index];
           }
        }return res;
    }
    code.innerHTML=getCode(str);
    btn.onclick=function(){
        code.innerHTML=getCode(str);
    }
</script>

一只桃子~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
for和while实现无重复四位验证码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #code{ .
复制链接

扫一扫