原生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>

 

相关文章