js实现验证码功能

一个大长腿

已于 2022-11-21 14:09:19 修改

阅读量279

点赞数

文章标签： javascript 前端 html

于 2022-11-21 13:43:45 首次发布

本文链接：https://blog.csdn.net/zybijiso666/article/details/127963066

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			.box{
				margin-left:20px;
			}
			#inp{
				display: inline-block;
				color:pink;
				font-size: 20px;
				text-align: center;
			}
			.box input{
				text-align: center;
				height:20px;
				
			}
			
		</style>
	</head>
	<body>
		<div class="box">
		            <span id="inp"></span>
		            <input type="text" id="zheng" placeholder="请输入验证码">
		            <button id="btn">提交</button>
		    </div>
		 
		    <script>
		        let sum=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
		        let inp=document.getElementById("inp");
		        let code;
		         
		        function fun(){
		            let str="";
		            for(let i=0;i<4;i++){
		                let pos=Math.round(Math.random()*24);
		                str+=sum[pos];
		            }
		            inp.innerHTML=str;
		            return str;
		        }
		 
		        window.onload=function(){
		            code=fun();
		        }
		         
		        let btn=document.getElementById("btn");
		        btn.onclick=function(){
		            let t=document.getElementById("zheng").value;
		            console.log(t);
		            if(t==code){
		                alert("验证码输入成功");
		                code=fun();
		                document.getElementById("zheng").value="";
		            }
		            else{
		                alert("验证码输入错误");
		                document.getElementById("zheng").value="";
		            }
		        }
		         
		 
		    </script>
	</body>
</html>