效果
<style type="text/css">
span{
width:80px;
height: 10px;
display: inline-block;
background: grey;
margin-right: 3px;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<input type="text" id="txt" />
<div id="box" style="margin-top: 4px;">
<span id="r">弱</span>
<span id="z">中</span>
<span id="q">強</span>
</div>
</body>
</html>
<script src="https://www.cnblogs.com/xiaoyaolang/p/public.js"></script>
<script type="text/javascript">
/*
1、一類字符 是 弱 純數字 弱 純字母 弱 純 特殊字符 弱
2、兩類字符 是 中
3、三類字符 強
*/
//包含數字 字母 特殊字符 三個正則
var num = /^\d+$/;//純數字
var char_ = /^[a-z]+$/i;//純字母
var other = /^[!@#$%^&*]+$/;//純特殊字符
var _num = /\d+/;//包含數字
var _char = /[a-z]+/i;//包含字母
var _other = /[!@#$%^&*]+/ //包含特殊字符
$id("txt").onkeyup = function(){
var str = this.value;
if(str.length < 5){//內容的長度小于5，顏色不變
$id("r").style.background = "grey";
$id("z").style.background = "grey";
$id("q").style.background = "grey";
return
}
//排他思想
$id("r").style.background = "grey";
$id("z").style.background = "grey";
$id("q").style.background = "grey";
if(num.test(str) || char_.test(str) || other.test(str)){//純數字或者純字母或者純其他字符都是弱
$id("r").style.background = "deeppink";
}else if(_num.test(str) && _char.test(str) && _other.test(str)){//三個都包含 強
$id("q").style.background = "deeppink";
}else{
$id("z").style.background = "deeppink";
}
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/27980.html
標籤：HTML5
上一篇：進度條效果
下一篇：bootstrap總結