<!doctype html><html><head lang="en"> <meta charset="utf-8"> <title></title> <style> .block{ width: 150px; height: 50px; line-height: 50px; border: 1px solid silver; background:url("./img/bg1.png")no-repeat; background-size:120% ; text-align: center; } .btn{ color: green; background-color: #d6ffe1; cursor: pointer; } .yztxt{ width: 150px; height: 20px; border: 1px solid silver; } </style></head><body><p class="block"></p><span class="btn">看不清....</span><br><input class="yztxt" type="text"><br><button class="yz">验证</button><script> var b=document.getelementsbyclassname("block")[0]; var btn=document.getelementsbyclassname("btn")[0]; var s=document.getelementsbyclassname("txt"); var yztxt=document.getelementsbyclassname("yztxt")[0]; var yz=document.getelementsbyclassname("yz")[0]; var numrous=""; //定义一个空数组 用来存放生成的验证码 yz.onclick=function(){ //给验证按钮一个方法 判断验证码是否输入正确 if(yztxt.value.length<=0){ alert("请输入验证码：") } else if(yztxt.value== numrous.tolowercase()){ alert("验证成功！"); } else{ alert("验证失败！"); nrandom();//验证失败重新调随机产生验证码的函数 } }; btn.onclick=function(){//当鼠标点击看不清时，切换验证码 nrandom(); }; nrandom(); function nrandom(){ numrous="";//在产生下一组验证码，清空上次验证码 b.innerhtml="";//清空文本框中验证码 for(var i=0;i<6;i++){ var num=math.random()*100; //产生数字，大小写字母的总概率100 if(num<=50){ //数字产生的概率50% var n=math.floor(math.random()*10); numrous+=n;//将随机产生的数字放在字符串numrous b.innerhtml+="<span class='txt'>"+n+"</span>";//将随机产生的数字在文本框中显示 } else if(num>=50&&num<=80){ //产生小写字母的概率为30% var n =string.fromcharcode(math.floor(math.random()*25+97)); numrous+=n; b.innerhtml+="<span class='txt'>"+n+"</span>"; } else{ //产生大写字母的概率20% var n =string.fromcharcode(math.floor(math.random()*25+65)); numrous+=n; b.innerhtml+="<span class='txt'>"+n+"</span>"; } } stylezi();//调用验证码字体样式 } //下面分别设置了验证码的颜色，大小，粗细，距左的距离以及倾斜角度 function stylezi(){ for(var i=0;i< s.length;i++){ s[i].style.color="rgb("+math.floor(math.random()*255)+","+math.floor(math.random()*255)+","+math.floor(math.random()*255)+")"; s[i].style.fontsize=(math.random()*20+15)+"px"; s[i].style.fontweight=math.random()*300+200; s[i].style.left=(math.random()*20-10)+"px"; s[i].style.transform="rotatez("+math.random()*90-45+"deg)"; } }</script></body></html>
相关推荐：
js在网页上显示时间的代码实现
js如何生成二维码？js生成二维码的方法（代码）
以上就是原生js实现验证码的生成方法（完整代码）的详细内容。