<!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>
原生JS制作验证码（优化）
猜你喜欢
转载自www.cnblogs.com/lsqbk/p/10259026.html
今日推荐
周排行