其他---01js密码强度实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		html,body{
        height: 100%;
    }
    body{
        display: flex;/*(笔记里面有)*/
        align-items: center;
        align-content: center;
    }
		#password{
			display:inline-block;
			padding:5px 20px;
			border:1px solid red;
			color:#333;
			margin:0 auto;
		}
		#password>p{
			font-size:12px;
			color:#888;
		}
		.tips{
			display:inline-block;
			padding:3px 8px;
			border:1px solid #b9b8b8;
			margin-right:10px;
			border-radius:30px;
		}
	</style>
</head>
<body>
	<div id="password">
		密码：<input type="password" value=""/>
			<p>
				密码强度:
				<sapn class="tips"></sapn>
				<sapn class="tips"></sapn>
				<sapn class="tips"></sapn>
				<sapn class="tips"></sapn>
				<span class="tips"></span>
			</p>
	</div>
<script type="text/javascript">
function matchLevel(password){
	if(password.length<6){
		return 0;
	}
	else if(password.length>=6&&password.length<10){
		return 1;
	}
	else if(password.length>=10&&password.length<16){
		return 2;
	}
	else if(password.length>=16&&password.length<20){
		return 3;
	}
	else{
		return 4;
	}
}
	window.onload=function(){
		tipColor=['red','yellow','orange','green','blue'];
		var tipEle=document.getElementsByClassName("tips");
		document.getElementsByTagName("input")[0].onkeyup=function(){
			var level=matchLevel(this.value);
			if(this.value.length){
				for(var i=0,eleLen=tipEle.length;i<eleLen;i++){
					if(i<=level){
						tipEle[i].style.backgroundColor=tipColor[i];
					}else{
						tipEle[i].style.backgroundColor="";
					}
				}
			}
			else{
				for(var i=0,eleLen=tipEle.length;i<eleLen;i++){
					tipEle[i].style.backgroundColor="";
				}
			}
		}
	}
</script>
</body>
</html>
posted @ 2020-06-03 21:11 !ment 阅读(241) 评论(0) 收藏举报
刷新页面返回顶部
目录

!ment

其他---01js密码强度实例
