<!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>