Native js write verification code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<!--viewport : 视口--> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>	
		<title>验证码</title>
		<style>
			*{
    
    
				margin:0;
				padding:0;
			}
			.box{
    
    
				position:relative;
				width:250px;
				height:230px;
				border:1px solid black;
			}
			input{
    
    
				width:200px;
				height:50px;
			}
			.TFimg{
    
    
				position:absolute;
				width:20px;
				height:20px;
				/*通过js控制显示*/
				/*background-image:url('images/false.png');*/
				background-size:100%;
				right:10px;
				top:20px;
			}
			.TFtext{
    
    
				/*通过js控制显示*/
				display:none;
				width:200px;
				height:16px;
				color:red;
				font-size:1px;
			}
			.identifyingCode{
    
    
				width:204px;
				height:80px;
				background-image:url('images/black.jpg');
				background-size:100%;
				margin-top:20px;
				text-align:center;
				line-height:80px;
				color:#fff;
				font-size:35px;
				font-style:italic;
				letter-spacing:8px;
			}
			.identifyingCodeImg{
    
    
				position:absolute;
				width:20px;
				height:20px;
				background-image:url('images/刷新.jpg');
				background-size:100%;
				right:10px;
				top:100px;
			}
			.sumbit{
    
    
				position:absolute;
				width:70px;
				height:50px;
				background-color:green;
				color:white;
				bottom:0;
			}
		</style>
	</head>
	<body>	
		<div class = 'box'>
			<input type = 'text' placeholder = '请输入验证码' onblur="javascript:getvalue();" value = '请输入验证码'/>
			<div class = 'TFimg'></div>
			<div class = 'TFtext'>验证码错误，请重新输入</div>
			<div class = 'identifyingCode'></div>
			<button class = 'identifyingCodeImg'></button>
			<button class = 'sumbit'>submit</button>
		</div>
		<script>
			//存放验证码的div
			var identifyingCode = document.getElementsByClassName('identifyingCode')[0];
			//刷新按钮
			var identifyingCodeImg = document.getElementsByClassName('identifyingCodeImg')[0];
			//用户输入信息
			var input = document.getElementsByTagName('input')[0];
			//提交按钮
			var sumbit = document.getElementsByClassName('sumbit')[0];
			//用来判断用户输入内容和验证码是否相同所使用的变量(相当于内容为验证码)
			var text;
			//提示图片
			var TFimg = document.getElementsByClassName('TFimg')[0];
			//提示文字
			var TFtext = document.getElementsByClassName('TFtext')[0];
			window.onload = function(){
    
    
				init();
			};
			function init(){
    
    
				//让div元素中出现验证码
				verificationCode();
				//给刷新按钮添加功能
				identifyingCodeImg.onclick =verificationCode;
				//提交按钮绑定事件用来判定用户输入内容和验证码是否相同
				sumbit.onclick = getvalue;
				
			}
			function verificationCode(){
    
    
				//1.创建一个包含0 - 9 小写字母 大写字母的数组
				var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
				for(var i = 65; i <= 122; i++){
    
    
					//这个部分既不属于小写字母也不属于大写字母
					if(i > 90 && i <97){
    
    
						continue;
					}
					arr.push(String.fromCharCode(i));
				}
				//2.在数组中随机获取6位（包含数字，字母）往div中放入
				identifyingCode.innerHTML="";
				for(var i = 0; i < 6; i++){
    
    
					identifyingCode.innerHTML += arr[Math.floor(Math.random() * arr.length)];
				}
				text = identifyingCode.innerHTML;
			}
			function getvalue(){
    
    
				if(text == input.value){
    
    
					TFimg.style.backgroundImage = 'url(images/true.png)';
					TFtext.style.display = 'none';
				}else{
    
    
					TFimg.style.backgroundImage = 'url(images/false.png)';
					TFtext.style.display = 'block';
				}
			}
		</script>
	</body>
</html>
Native js write verification code

Guess you like
