<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-color: #EDEDED;
}
#app{
}
*{
margin: 0px;
padding: 0px;
font-family: SFText,Helvetica,sans-serif;
}
#pwdPrompt{
margin-top: 10%;
width: 460px;
height: 270px;
border-radius: 8px 8px 8px 8px;
background-color: #FFFFFF;
}
.pwdPrompt_left{
height: 230px;
width: 100px;
float: left;
}
.pwdPrompt_left_top{
}
.pwdPrompt_left_top img{
margin-top: -11%;
margin-left: -15px;
width: 140px;
height: 140px;
}
.pwdPrompt_right{
width: 353px;
float: left;
height: 280px;
}
.pwdPrompt_right_head{
margin-top: 3.8%;
width: 330px;
height: 25px;
}
.pwdPrompt_right_head p{
font-size: 16px;
font-weight: 100;
color: rgb(110,110,115);
text-shadow: 0.1px 0.1px 2px silver;
}
.pwdPrompt_right_ul{
border-radius: 5px 5px 5px 5px;
width: 325px;
border: 2px solid rgb(110,110,115);
height: 120px;
margin-top: 2%;
}
.pwdPrompt_right_ul_li{
float: left;
margin-left: 3%;
width: 300px;
height: 30px;
margin-top: 2%;
}
.pwdPrompt_right_ul_li_circle{
opacity: 0.6;
height: 10px;
width: 10px;
border-radius: 10px;
background: rgb(110,110,115);
float: left;
margin-top: 3%;
margin-left: 2%;
margin-right: 2%;
}
.pwdPrompt_right_ul_li_span{
float: left;
font-weight: 100;
font-size: 15px;
margin-top: 1.4%;
color: rgb(110,110,115);
text-shadow: 0.1px 0.1px 2px silver;
}
.pwdPrompt_right_strongDesc{
margin-left: 2px;
margin-top: 3%;
width: 325px;
height: 20px;
}
.pwdPrompt_right_strongDesc_p{
height: 20px;
float: left;
}
.pwdPrompt_right_strongDesc_p P{
font-weight: 100;
color: rgb(110,110,115);
text-shadow: 0.1px 0.1px 2px silver;
}
.pwdPrompt_right_strongDesc_p_span{
float: left;
height: 20px;
max-width: 100px;
margin-left: 3%;
}
.pwdPrompt_right_strongDesc_p_span span{
font-weight: 100;
color: rgb(110,110,115);
text-shadow: 0.1px 0.1px 2px silver;
}
.pwdPrompt_right_scorebar{
margin-top: 2%;
width: 325px;
height: 7px;
}
.pwdPrompt_right_scorebar_back{
position: relative;
width: 322px;
height: 7px;
background: rgb(186,186,186);
opacity: 0.7;
}
.pwdPrompt_right_scorebar_entity{
height: 7px;
position: absolute;
opacity: 0.8;
}
.pwdPrompt_right_info{
margin-top: 1.8%;
margin-left: -0.9%;
width: 320px;
}
.pwdPrompt_right_info_p{
line-height: 20px;
text-align: left;
font-size: 13px;
font-weight: 100;
color: rgb(110,110,115);
text-shadow: 0.1px 0.1px 2px silver;
opacity: 0.8;
}
.pwdPrompt_right_ul_li_circle_yes{
background: #32ff5a;
}
.df{
clear: left;
}
.intxt{width: 400px;
margin-left: auto;
margin-right: auto;display: block
}
.intxt input{line-height: 30px;width: 400px;padding-left: 10px}
</style>
<script src="jquery3.4.1.js"></script>
<script src="jquery.color.js"></script>
</head>
<body>
<div id="app" align="center">
<div id="pwdPrompt">
<div class="pwdPrompt_left">
<div class="pwdPrompt_left_top">
<img src="gear.svg">
</div>
</div>
<div class="pwdPrompt_right">
<div class="pwdPrompt_right_head">
<p class="">出于安全考虑,您提交的密码必须包含以下条件.</p>
</div>
<div class="pwdPrompt_right_ul">
<div class="pwdPrompt_right_ul_li" state="">
<div class="pwdPrompt_right_ul_li_circle">
</div>
<div class="pwdPrompt_right_ul_li_span">
长度至少为十个字符
</div>
</div>
<div class="pwdPrompt_right_ul_li" state="">
<div class="pwdPrompt_right_ul_li_circle">
</div>
<div class="pwdPrompt_right_ul_li_span" >
至少包含大小写字母各一个
</div>
</div>
<div class="pwdPrompt_right_ul_li" state="">
<div class="pwdPrompt_right_ul_li_circle">
</div>
<div class="pwdPrompt_right_ul_li_span">
至少包含一个数字
</div>
</div>
</div>
<div class="pwdPrompt_right_strongDesc">
<div class="pwdPrompt_right_strongDesc_p">
<p>密码强度:</p>
</div>
<div class="pwdPrompt_right_strongDesc_p_span">
<span ></span>
</div>
</div>
<div class="pwdPrompt_right_scorebar">
<div class="pwdPrompt_right_scorebar_back">
<div class="pwdPrompt_right_scorebar_entity" style="background-color: red"></div>
</div>
</div>
<div class="pwdPrompt_right_info" code="">
<div class="pwdPrompt_right_info_p ">
<p >避免使用您用于其他网站的密码
<br>
或易于被他人猜到的密码 .</p>
</div>
</div>
</div>
</div>
</div>
<div class="df"></div>
<div class="intxt"><input type="password" oninput="renovatePwdPromptState(this)" ></div>
</body>
</html>
<script>
function pwdPromptInfo(type,code,body) {
this.type = type
this.code = code
this.body = body
}
var pwdPromptInfoEntityList = new Array()
pwdPromptInfoEntityList[200] = new pwdPromptInfo(0,200,"<div class=\"pwdPrompt_right_info_p \"><p >避免使用您用于其他网站的密码<br>或易于被他人猜到的密码 .</p></div>")
pwdPromptInfoEntityList[201] = new pwdPromptInfo(0,201,"<div class=\"pwdPrompt_right_info_p \"><p style='color: red'>密码长度不能大于三十二个字符</p></div>")
pwdPromptInfoEntityList[202] = new pwdPromptInfo(0,202,"<div class=\"pwdPrompt_right_info_p \"><p style='color: red'>密码中含有的连续字符太多</p></div>")
pwdPromptInfoEntityList[203] = new pwdPromptInfo(0,203,"<div class=\"pwdPrompt_right_info_p \"><p style='co
