JS经典案例之随机生成验证码

Posted 2021-09-19 秋风不曾见过桃花

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS经典案例之随机生成验证码相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>			
		</style>
	</head>
	<body>
		<div>
		<h1>111111</h1><a href="#">看不清换一张</a>
		</div>
		验证码：<input type="text" value="" />
		<button>确定</button>
	</body>
	<script>
		var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
							"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
							0,1,2,3,4,5,6,7,8,9];
        var h1=document.querySelector("h1");
        var btn=document.querySelector("button");
        var change=document.querySelector("a");     
        var input=document.querySelector("input");         
         function fn(){
        var arr1=Math.floor(Math.random()*62);
        var arr2=Math.floor(Math.random()*62);
        var arr3=Math.floor(Math.random()*62);
        var arr4=Math.floor(Math.random()*62);
        var arr5=Math.floor(Math.random()*62);
        var arr6=Math.floor(Math.random()*62);
        var yz=""+arr[arr1]+arr[arr2]+arr[arr3]+arr[arr4]+arr[arr5]+arr[arr6];
         	  h1.innerHTML=yz;    
         	  btn.onclick=function(){
         	  	 alert(input.value);
         	  	if(input.value==yz){
         	  alert("正确");
         	  }else{
         	  	alert("错误");
         	  }
         	 
         	  }
         }
        fn();
    change.addEventListener("click",fn);
	</script>
</html>