密码输入框与验证示例-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46101757/article/details/108750803

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			body{
				background: #900B09;
			}
			#box{
				width: 250px;
				height: 350px;
				border: 1px solid black;
				margin: 200px auto;
				border-radius: 20px;
				background: ;
				padding: 50px;
				box-shadow: 15px 10px  #000000;
				background: #23384E;
			}
			#box-1{
				width: 100%;
				height: 300px;
				margin-top:25px;
			}
			.xnum{
				width: 50px;
				height: 50px;
				border: 1px solid black;
				float: left;
				margin: 10px 15px;
				text-align: center;
				line-height: 50px;
				font-size: 20px;
				font-weight: 600;
				-moz-user-select:none;/*火狐*/
				-webkit-user-select:none;/*webkit浏览器*/
				-ms-user-select:none;/*IE10*/
				-khtml-user-select:none;/*早期浏览器*/
				user-select:none;
				box-shadow: 5px 5px black;
				border-radius: 12px;
			}
			.xnum:nth-of-type(10){
				width: 217px;
			}
			.xnum:hover{
				box-shadow: 15px #000000;
				cursor: pointer;
			}
			#box-2{
				width: 250px;
				height: 50px;
				text-align: center;
			}
			.xnum-1{
				margin: 0 10px;
				font-size: 50px;
				user-select: none;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var ali=document.getElementsByClassName("xnum");
				var anum=document.getElementsByClassName("xnum-1");
				var deh=0;  //用于记录点击的次数
				var str=[]; //用于存储输入的密码
				for(var i=0;i<ali.length;i++){
					ali[i].onmousedown=function(){
						this.style.boxShadow="2px 2px black"; //设置鼠标点击时按键的阴影样式
					}
					ali[i].onmouseup=function(){
						this.style.boxShadow="5px 5px black" //设置鼠标松下时按键的阴影样式
					}
					ali[i].onclick=function(){
						anum[deh].innerHTML=this.innerHTML;
						deh++;
						if(deh>=4){
							//循环遍历密码框内容添加到数组
							for(var j=0;j<anum.length;j++){
								str+=anum[j].innerHTML;
							}
							str==2580?window.location.href="https://cn.vuejs.org/":(resurt()); //验证密码，密码正确,跳转网站,密码错误重置数据.
						}
					}
				}
				//定义密码错误时,重置数据
				function resert(){
					for(var n=0;n<anum.length;n++){
						anum[n].innerHTML="_";
					}
					alert("密码错误");
					deh=0;
					str=[];
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div id="box-2">
					<span class="xnum-1">_</span>
					<span class="xnum-1">_</span>
					<span class="xnum-1">_</span>
					<span class="xnum-1">_</span>
			</div>
			<div id="box-1">
				<ul>
					<li class="xnum">1</li>
					<li class="xnum">2</li>
					<li class="xnum">3</li>
					<li class="xnum">4</li>
					<li class="xnum">5</li>
					<li class="xnum">6</li>
					<li class="xnum">7</li>
					<li class="xnum">8</li>
					<li class="xnum">9</li>
					<li class="xnum">0</li>
				</ul>
			</div>
		</div>
	</body>
</html>