JavaScript学习之Math对象--随机验证码

Math.random()
js代码：

        <script type="text/javascript">
        window.onload=function (){
            var res = "";
            //获取验证码div
            var yzm = document.getElementById("yzm");
            //获取a链接
            var a = document.getElementsByClassName("a")[0];
            yanzhengma();
            //点击a链接的时候重新生成验证码
            a.onclick = function() {
                yanzhengma();
            }
            //获取文本框
            var txt = document.getElementsByClassName("txt")[0];
            //获取确定按钮
            var btn = document.getElementsByClassName("btn")[0];
            //点击确定按钮时间
            btn.onclick = function() {
                //判断输入框是否为空
                if(txt.value==""){
                    alert("请输入验证码");
                }else{
                    //判断输入框内容与随机生成的验证码是否相同
                    if(res != txt.value) {
                        alert("验证码输入错误！");
                        txt.value="";
                        yanzhengma();
                    } else {
                        alert("验证码输入正确");
                    }
                }
            }
            //封装一个函数
            function yanzhengma() {
                res = "";
                yzm.innerHTML = ""; //每次进来先清空验证码div里的内容
                //循环出6位数字
                for(i = 0; i < 6; i++) {
                    var num = Math.floor(Math.random() * 10); //产生随机数0~9
                    //console.log(num)
                    //yzm.innerHTML+=num;
                    var div = document.createElement("div");//创建一个div
                    //随机数字的颜色
                    var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";
                    res += num;//将随机产生的数字拼接起来
                    div.className = "yzminfo";
                    div.innerHTML = num;
                    div.style.color = color;
                    div.style.transform = "rotateZ(" + (Math.random() * 360 - 180) + "deg)"
                    yzm.appendChild(div);//把创建的div追加给yzmdiv
                }
            }
        }
    </script>

css样式：

        .div {
            width: 500px;
            height: 85px;
        }

        .txt {
            height: 60px;
            font-size: 28px;
        }

        .divbg {
            float: left;
            margin-left: 10px;
        }

        #yzm {
            width: 120px;
            height: 50px;
            background: #ccc;
        }

        #wbk {
            float: left;
        }

        a {
            margin-top: 3px;
            display: block;
            font-size: 12px;
        }

        .yzminfo {
            float: left;
            width: 20px;
            height: 50px;
            line-height: 50px;
            font-size: x-large;
            text-align: center;
        }

        .btn {
            width: 473px;
            height: 50px;
        }

html代码：

    <div class="div">
        <div id="wbk">
            <input type="text" class="txt" value="" />
        </div>
        <div class="divbg">
            <div id="yzm">
            </div>
            <a class="a" href="JavaScript:void(0)">看不清楚,点击更换</a>
            <!--去掉a链接点击会跳到页面上方的效果-->
        </div>
    </div>
    <div class="btn_div">
        <input type="button" class="btn" value="确定" />
    </div>