web简易数字型验证码实现（超简单）

最新推荐文章于 2024-05-07 05:13:07 发布

Alphamilk

最新推荐文章于 2024-05-07 05:13:07 发布

阅读量1.6k

点赞数 3

文章标签： html javascript css

本文链接：https://blog.csdn.net/dogxixi/article/details/128258549

版权

原理

原理文字描述

1.首先是将一组数字（四位随机数）放入盒子模型

2.然后通过css对数字的加工改为艺术字

3.而后通过js获取form表单里的text文本(并且判断输入是否一致)

图片演示原理

1.艺术字的加工通过text-shadow 改变

p{
    font-size: 45px;
    text-shadow: -5px 4px 3px  black;
    color: white;
    display: inline-block;
}
<body>
	<p> 1234</p>
	<p> <strike> 1234 </strike> </p>
	<p> <i>1234</i> </p>
</body>

效果图：

2.创建随机数（Math.random()有关内容）

<script>
	// 生成0~1之间的随机数
	var random1 = Math.random();
		
	// 生成n到m的随机数
	var random2 = Math.random()*(m-n)+n;
		
	//生成0~1之间的整数
	var random3 = Math.floor(Math.random());
		
	//生成n~m之间的整数
	var random4 = Math.floor(Math.random()*(m-n))+n;
</script>

3.判断

if(prove == inputs){
     alert("您输入验证码正确");
}
else{
	 alert("您输入验证码错误");
}

演示案例以及实现代码

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数字验证码实现</title>
		<style>
			#inputs{
				float: left;
				margin-top: 74px;
				border: none;
				outline: none;
				font-size: 20px;
				border-bottom: 1px solid black;
				float: left;
				margin-right: 20px;
				font-weight: bold;
			}
			
			p{
				display: inline-block;
				text-shadow: ;
				
			}
			div{
				float: left;
				width: 194px;
				height: 200px;
				margin-left: 100px;
			}
			span{
				border: 1px solid black;
				width: 200px;
				height: 100px;
				display: inline-block;
				text-align: center;
				
			}
			span >p{
				font-size: 80px;
				text-shadow: 7px 4px  2px black;
				color: white;
				margin-top: -10px;
			}
			button{
				margin-top: 133px;
				margin-left: -307px;
				width: 200px;
				height: 50px;
				background-color: orangered;
				border: none;
				
			}
			a{
				text-decoration: none;
				font-size: 15px;
				color: gold;
			}
		</style>
	</head>
	<body>
		    <div id="">
		    	<input type="text" id="inputs" placeholder="请输入验证码">
		    	<button><a href="javascript:;">提交</a></button>
				
		    </div>
			
			
			<div>
				<span><p> <strike id="provement"> 0000 </strike> </p> </span>
			<a href="javascript:;">看不清？点击换一张</a>
			
			</div>
	</body>
	<script>
		// 设置随机数整数落在1000~9999 保证验证码为四位数
		var random = Math.floor(Math.random()*10000)+1000;
		if(random>10000){
			random = random%10000;
		}
		if(random<1000){
			random = random+1000;
		}
		// 获取元素标签并给验证码赋值
		var provement = document.getElementById("provement");
		var btn = document.querySelector("button");
		var prove = provement.innerText;
		provement.innerText = random;
		
		btn.onclick=function(){
			
			var text = document.getElementById("inputs");
			var inputs = text.value;
			// 注意此处的inputs获取内数据是通过.value来获取内部数据
			var prove = provement.innerText;
			
			if(prove == inputs){
				alert("您输入验证码正确");
			}
			else{
				alert("您输入验证码错误");
			}
			var random = Math.floor(Math.random()*10000)+1000;
			if(random>10000){
				random = random%10000;
			}
			if(random<1000){
				random = random+1000;
			}
			provement.innerText = random;
			
		}	
	</script>
</html>

由于本人技术力有限，如果有不妥之处欢迎指正 -^-^-