<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
div{
width: 300px;
height: 300px;
margin: 50px auto;
}
input{
width: 250px;
height: 30px;
}
li{
width: 50px;
height: 30px;
background-color: darkgrey;
float: left;
margin-right: 30px;
line-height: 30px;
text-align: center;
}
li:nth-child(1){
margin-left: 20px;
}
ul li:nth-child(1).show{
background-color: green;
}
ul li:nth-child(2).show{
background-color: red;
}
ul li:nth-child(3).show{
background-color: gold;
}
</style>
</head>
<body>
<div>
<input type="text"/>
<ul>
<li>弱</li>
<li>中</li>
<li>强</li>
</ul>
</div>
<script>
var input=document.querySelector('input')
var li=document.querySelectorAll('li')
var reg1=/\d/
var reg2=/[A-z]/
var reg3 = /[@./_!]/
input.οnblur=function(){
var zoom=0
if(reg1.test(input.value)){
zoom++
}
if(reg2.test(input.value)){
zoom++
}
if(reg3.test(input.value)){
zoom++
}
for(let i=0;i<li.length;i++){
li[i].classList.remove('show')
if(zoom>i){
li[i].classList.add('show')
}
}
}
console.log(12)
</script>
</body>
</html>
06-20
1175
1175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
