js基础之点击获取随机验证码

最新推荐文章于 2023-02-13 16:40:09 发布

可爱又迷人的反派少女

最新推荐文章于 2023-02-13 16:40:09 发布

阅读量515

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_48291770/article/details/107538676

版权

js 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

可以通过点击盒子来获取验证码

 box.onclick=function(){//给盒子添加点击事件`

可以通过网页刷新获取验证码（封装一个产生随机验证码的函数）
function yzm(){} yzm();
每次获取的验证码颜色字体不同
验证码在大小字母A-Z和数字0-9随机获取四个值

 var str='qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890';

 //点击之后定义一个空串 存储新的四个随机值
             var str1='';

               for(var i=0;i<4;i++){   //生成四个随机值
             //在0~str.length-1 随机得到字符串的下标值
             
              var num=Math.round(Math.random()*(str.length-1));    
             str1=str1+str[num];

整体代码

在<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 150px;
            height: 50px;
            background-color: #666666;
            margin: auto;
            text-align: center;
            line-height: 50px;
            color: #cccccc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">点击刷新验证码</div>
    <script>
        //点击获取对象
        var box=document.getElementsByClassName('box')[0];
        //字符串
        var str='qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890';
        yzm();//在点击之前调用一次随机数的产生

         box.onclick=function(){//给盒子添加点击事件
                yzm();
         }
          //封装一个产生随机验证码函数
         function yzm(){
             //点击之后定义一个空串 存储新的四个随机值
             var str1='';
             for(var i=0;i<4;i++){
                  //生成四个随机值
                  //在0~str.length-1 随机得到字符串的下标值
             var num=Math.round(Math.random()*(str.length-1));
             //取字体的随机数
             var fs=Math.round(Math.random()*(20)+12);
            //取字体颜色的随机值
            var r=Math.round(Math.random()*255);
            var g=Math.round(Math.random()*255);
            var b=Math.round(Math.random()*255);
            str1=str1+'<span style="font-size:'+fs+'px;color:rgb('+r+','+g+','+b+'); ">'+str[num]+'</span>';
            // str1=str1+"<span style='font-size:"+fs+"px; color:rgb("+r+","+g+","+b+");'>"+str[num]+"</span>";
            // str1=str1+str[num];
         }
         box.innerHTML=str1;
         }
    </script>
</body>
</html>

可爱又迷人的反派少女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础之点击获取随机验证码

可以通过点击盒子来获取验证码 box.onclick=function(){//给盒子添加点击事件`可以通过网页刷新获取验证码（封装一个产生随机验证码的函数）function yzm(){} yzm();每次获取的验证码颜色字体不同验证码在大小字母A-Z和数字0-9随机获取四个值 var str='qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM1234567890'; //点击之后定义一个空串存储新的四个随机值 .
复制链接

扫一扫