principle

Principle text description

1. The first is to put a set of numbers (four random numbers) into the box model

2. Then process the numbers through css and change them to artistic words

3. Then get the text in the form through js (and judge whether the input is consistent)

Picture Demonstration Principle

1. The processing of word art is changed by 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>

Renderings:

2. Create random numbers (Math.random() related content)

<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. Judgment

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

Demonstration case and implementation code

Implementation code

<!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>

Due to my limited technical ability, please correct me if there is anything wrong -^-^-

Realization of web simple digital verification code (super simple)

principle

Principle text description

Picture Demonstration Principle

Demonstration case and implementation code

Implementation code

Guess you like