原生JS制作验证码（优化） 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
请输入验证码:<input type="text" id="yzm">
               <span id="yzm1" style="background: #ccc"></span><br>
               <button id="btn">验证</button>
<!--               <textarea name="" id="" cols="30" rows="10"></textarea>-->
</body>
</html>
    <script>
        var yzm=document.getElementById("yzm"); //获取用户输入的验证码对象
        var yzm1=document.getElementById("yzm1");//获取随机生成的验证码对象
        var btn=document.getElementById("btn"); //获取提交按钮对象
        yzm1.onclick=getyzm; //给span添加点击事件并赋值
        getyzm(); //调用函数
    
        
        function getyzm(){
            var str="123456789qwertyuiopasdfghjklzxcvbnm"; //先定义一个字符串，用来随机从里面取值
            str=str.split(""); //把这个字符串的元素分割成字符串数组
//            console.log(str);
            var zhi="";   //定义一个空的字符串变量用来取值
            for(var i=0;i<4;i++){ //循环四次也就是取四个值
                zhi+=str[parseInt(Math.random()*str.length)];  //取随机数作为下标，+=字符串拼接到值里面去
            }
            yzm1.innerHTML=zhi; //页面中赋值
        }
            btn.onclick=function(){  //通过按钮点击判断
            var zhi1=yzm.value;
            var zhi2=yzm1.innerHTML;
            if(zhi1==zhi2){
                alert("对了");
            }else{
                alert("不对");
            }
        }
    </script>

 

posted @ 2019-01-12 11:05  OH-MY-GOD  阅读(283)  评论(0)    收藏  举报