原生js实现验证码的生成方法（完整代码）

来源：动视网责编：小采时间：2020-11-27 19:32:02

原生js实现验证码的生成方法（完整代码）

原生js实现验证码的生成方法（完整代码）:本篇文章给大家带来的内容是关于原生js实现验证码的生成方法（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head lang="en"> <meta cha

推荐度：

点击下载本文 文档为doc格式

导读原生js实现验证码的生成方法（完整代码）:本篇文章给大家带来的内容是关于原生js实现验证码的生成方法（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。<!DOCTYPE html> <html> <head lang="en"> <meta cha

本篇文章给大家带来的内容是关于原生js实现验证码的生成方法（完整代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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实现验证码的生成方法（完整代码）

推荐度：

点击下载本文 文档为doc格式

标签：方法验证码 js

热门焦点

原生js实现验证码的生成方法（完整代码）

原生js实现验证码的生成方法（完整代码）

原生js实现验证码的生成方法（完整代码）

最新推荐

猜你喜欢

热门推荐