js生成随机验证码

最新推荐文章于 2024-08-28 16:14:15 发布

m0_52434369

最新推荐文章于 2024-08-28 16:14:15 发布

阅读量61

点赞数

文章标签： js python javascript vue 机器学习

本文链接：https://blog.csdn.net/m0_52434369/article/details/118436366

版权

如何用原生js生成随机的验证码？可以直接复制看效果哟，快来试试吧！



<!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>
        span{
            color:red;
            font-style: oblique;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>验证码：<span></span></p>
    <input type="text" placeholder="请输入验证码：" >
    <button>看不清，点我切换！</button>
    <br></br>
    <button id="ff">确定</button>
    
    
</body>              
<script>
  

    //一来就调用生成随机验证码
    document.querySelector("span").innerHTML=zhang();
    var aa=document.querySelector("p");
    var bb=document.querySelector("button");
    function zhang(){
        var arry1='';
        //因为验证码是6位数，所以用循环
        for(i=0;i<6;i++)
         {
            var arry=['0','1','2','3','4','5','6','7','8','9','a','b',
            'c','d','e','f'];
             var a=Math.round(Math.random()*(15-0)+0);
             //拼接
            arry1+=arry[a];
         }
              return arry1; 
}


       bb.addEventListener("click",function(){
      var ma=zhang();
       document.querySelector("span").innerHTML=ma;
       })

       

       document.getElementById("ff").onclick=function(){
        var  cc=document.querySelector("input").value;
         var ss=document.querySelector("span").innerHTML;
          if(cc!=ss)
          {
            alert("sorry，你的验证码不成功！");
            document.querySelector("input").value='';
        }
        else
        {
            alert("恭喜你！，你的验证码已经成功！");
            document.querySelector("input").value='';
        }
    }
    

</script>
</html>

m0_52434369

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js生成随机验证码

如何用原生js生成随机的验证吗？可以直接复制看效果哟，快来试试吧！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
复制链接

扫一扫