js中实现验证码功能

最新推荐文章于 2022-11-13 20:47:31 发布

霜月枫桥

最新推荐文章于 2022-11-13 20:47:31 发布

阅读量871

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/MOONCOM/article/details/54292021

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="zh">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="jquery.js"></script>
  <script>
        $(function(){
            changeCheckCode();

            $("#checkCode").click(function(){
                changeCheckCode();

            });
        }); 

        

        function changeCheckCode(){
            var valueArray=new Array('qwertyuioplkjhgfdsazxcvbnm','QWERTYUIOPLKJHGFDSAZXCVBNM','1234567890');
            var colorArray=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
            var color="#";
            var colorArrayLength=colorArray.length;
            var value="";
            for(var i=0;i<4;i++){
                var valueIndex=valueArray[Math.floor(Math.random()*3)];
                value=value+valueIndex.substr((Math.floor(Math.random()*(valueIndex.length))),1);
            }
            console.log("value的值为："+value);
            
            for(var j=0;j<6;j++){
                color=color+colorArray[Math.floor(Math.random()*colorArrayLength)];
            }
            console.log("color的值为："+color);
            $("#checkCode").css("background-color",color).text(value);

        }
  </script>
  <style>
        #checkCode{
            width:80px;
            height:40px;
            display:table-cell;
            text-align:center;
            vertical-align:middle;
            color:white;
            font-size:16px;
            font-weight:bold;
            opacity:0.5;
            letter-spacing:5px;
            text-decoration:line-through;
        }
  </style>
 </head>
 <body>
 <div id="checkCode"></div>
 <hr>
 
  
 </body>
</html>

备注：

Math.round(number) //小数进行四舍五入

Math.floor(number) //舍弃小数位，向下取整

Math.ceil(number) //若存在小数，则进位。向上取整

效果图如下：

霜月枫桥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js中实现验证码功能

Document $(function(){ changeCheckCode(); $("#checkCode").click(function(){ changeCheckCode(); }); });
复制链接

扫一扫

专栏目录