web简易数字型验证码实现(超简单)

目录

原理

原理文字描述

图片演示原理

演示案例以及实现代码

 实现代码


原理

原理文字描述

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>

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

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alphamilk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值