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

来源：互联网发布：淘宝开店考试题编辑：程序博客网时间：2024/06/05 06:20

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>

阅读全文

0 0