js实现验证码

最新推荐文章于 2022-11-24 20:30:29 发布

muxi229

最新推荐文章于 2022-11-24 20:30:29 发布

阅读量1.5k

点赞数 4

分类专栏：前端文章标签： javascript random

本文链接：https://blog.csdn.net/muxi229/article/details/107506693

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

命运所赠送的礼物，早已暗中标好价格

前言
算上实习，现在算是工作两年了，上学的时候没好好学，到现在也没去了解过验证码是如何实现的。昨天看到一篇关于验证码的博文，跟着练了一下。

js实现验证码功能一文写的非常清楚，可以了解一下。

效果：
在这里插入图片描述
解析：
a.生成随机码，由26位大小写字母和数字组合而成。
b.判断输入框输入的值是否与验证码一致。

1.random生成[0,1)之间的随机数，
生成 [min,max] 之间的随机数

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
 }

2.字符串是类数组，可以用length属性，可以通过下标取值

源码

<!DOCTYPE html>
<html>
<head>
	<title>验证码</title>
	<style>
		input{
			width:150px;
			height:30px;
			font-size:20px;
			outline: none;
			vertical-align:middle;
		}
		button{
			height:30px;
			cursor:pointer;
			vertical-align:middle;
		}
		div{
			display:inline-block;
			width:110px;
			height:40px;
			line-height: 40px;
			cursor:pointer;
			text-align: center;
			background-color: lightgray;
			vertical-align:middle;
		}
	</style>
</head>
<body>
<input type="text">
<div></div>
<button>提交</button>
<script>
	var str;
	var input = document.querySelector("input");
	var btn = document.querySelector("button");
	var div = document.querySelector('div'); 

// 验证码字符
	var chars = "qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890";

// 生成m-n的数字
	function getRandom(m,n){
		return Math.floor(Math.random()*(n-m+1)+m);
	}
// 验证码禁用文本选中
	div.addEventListener("selectstart",function(e){
		e.preventDefault();
	})
// 生成随机验证码
	function run(){
		str = '';
		// 若验证码存在，则清除
		while(div.hasChildNodes()){
			div.removeChild(div.firstChild);
		}
		// 生成6位数的验证码
		 for(var i=0;i<6;i++){
		 	var span = document.createElement('span');
		 	span.innerHTML = chars[getRandom(0,chars.length-1)]; //生成随机数，并取得对应值
		 	span.style.display = "inline-block";
		 	span.style.fontSize = getRandom(16,24)+"px";  //随机字体大小
		 	span.style.color = 'rgb('+getRandom(0,200)+','+getRandom(0,200)+','+getRandom(0,200)+')';  //随机字体颜色
		 	span.style.transform = 'translate('+getRandom(-5,5)+'px,'+getRandom(-5,5)+'px) rotate('+getRandom(-20,20)+'deg)'; //随机平移旋转
		 	str += span.innerHTML; //将str拼接，和input值对比
		 	div.appendChild(span);
		 }
	}
	run(); //进入页面生成验证码
	div.addEventListener("click",run);

	btn.addEventListener("click",function(){
		if(input.value.toLowerCase() == str.toLowerCase()){   //转化为小写进行比较
			alert("验证通过！");
		}else{
			alert("验证失败！");
		}
		run();
		input.value = ""; //清空输入框
	})

</script>
</body>

</html>