【JavaScript随机生成验证码及其颜色】

时间：2023-03-09 06:55:09
【JavaScript随机生成验证码及其颜色】 
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中！！

效果：

【JavaScript随机生成验证码及其颜色】

相关文章