每天一个jquery插件-密码的等级
密码的等级
水~
效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>密码的等级</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div{
display: block;
width: 240px;
margin:10px auto;
outline: none;
height: 30px;
border: 1px solid lightgray;
}
#show{
width: 100px;
height: 50px;
border: 1px solid lightgray;
display:flex;
margin: 0 auto;
justify-content:center;
align-items: center;
}
</style>
</head>
<body>
<input id="div" type="text">
<div id="show">无</div>
</body>
</html>
<script>
$(function(){
$("#div").keyup(function(){
var temp =$(this).val();
var flag = [0,0,0,0]
for(var i = 0;i<temp.length;i++){
if(temp.charCodeAt(i)>=45&&temp.charCodeAt(i)<=57){
flag[0] = 1;
}else if(temp.charCodeAt(i)>=97&&temp.charCodeAt(i)<=122){
flag[1] = 1;
}else if(temp.charCodeAt(i)>=65&&temp.charCodeAt(i)<=90){
flag[2] = 1;
}else{
flag[3] =1;
}
}
var result = eval(flag.join("+"));
switch(result){
case 0:
result = "空的"
break;
case 1:
result="很弱"
break;
case 2:
result="强"
break;
case 3:
result="很强"
break;
case 4:
result="超强"
break;
}
$("#show").text(result)
})
})
</script>
实现
- 获取输入框的内容
- 遍历里面所有的字符，然后用charCodeAt来进行判断其ascll码的位置，对照着判断是什么种类，当然这里用正则会更加迅速
- 然后将所有状态存一个数组，符合条件就给数组标记点+1
- 最后在计算完成之后将数组累加得出结构根据不同结果反馈不同效果
- 完事…