js随机生成验证码及其颜色

Posted 张晓NAN

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js随机生成验证码及其颜色相关的知识，希望对你有一定的参考价值。

css样式：


<style type="text/css">
            /*给验证码设一个盒子*/
            #yzm{
                width: 120px;
                height: 50px;
                text-align: center;
                background: #ccc;
                float: left;
            }
            span{
                font-size: 20px;
                line-height: 50px;
            }
            /*按钮*/
            button{
                width: 100px;
                height: 50px;
            }
</style>
html代码：


<body onload=\'yanzhengma()\'>
    <!--在页面加载时就执行这个函数-->
    <div id="yzm">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
    </div>
    <!--点击事件-->
    <button onclick="yanzhengma()">刷新</button>
</body>
js代码：

<script type="text/javascript"> 
             //先写出一些需要随机的数字及字母
            var shu = (\'1234567890qwertyuioplkjhgfdsazxcvbnmQAZWSXEDCRFVTGBYHNUJMIKOLP\');
            //获取span
            var span = document.getElementsByTagName("span");
            //定义一个函数为yanzhengma()
            function yanzhengma(){
                var yzm=" ";
                //想要几个循环几个数值
                for(i=0;i<4;i++){
                    //随机Math.random()出的值乘以数组的长度，取出的值为数组的下标
                    var num = parseInt(Math.random() * shu.length);
                    //取出shu中的值,利用上面取出的下标num,此时取出的是数组中的值
                    yzm = shu[num];
                    //把随机取到的值通过innerHTML在页面上
                    span[i].innerHTML=yzm;
                    //把随机出的值通过style.color赋予颜色 ，Color()是自己封装的一个随机颜色函数   
                    span[i].style.color=color();
                }
            }
    </script>
颜色封装的代码：


/*封装Color*/
    function color(){
        var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
        return color;
    }

注意：封装在写完的时候千万千万记住要把它引入HTML中！！

 效果：

 

以上是关于js随机生成验证码及其颜色的主要内容，如果未能解决你的问题，请参考以下文章

如何用PHP生成验证码

Python生成验证码

在网页中，服务器端生成的验证码图片有啥要求，比如字体，颜色，图片大小，干扰线等等

PHP实现随机生成验证码功能

python 生成图形验证码

生成字母验证码图片