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;
}

	
 1234
	
  1234  
	
 1234 

效果图：

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

3.判断

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

演示案例以及实现代码

 

 

 实现代码

	
		
		
		
	
	
		    

		    	
		    	提交
				
		    
			
			
			

				
  0000  
 
			看不清？点击换一张
			
			
	
	

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