! DOCTYPE html html lang ="en" 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 input { width : 200px ; heig
<!DOCTYPE html> <html lang="en"> <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> input{ width: 200px; height: 24px; padding-left: 5px; } div{ width: 200px; display: flex; } span{ width: 100%; height: 14px; margin: 5px 1px; border: 1px solid #ccc; text-align: center; font-size: 12px; line-break: 14px; transition: .3s; /* background: o */ } </style> </head> <body> <h3>密码强度</h3> <input type="password" name="" placeholder="请输入你的密码" id="password"> <div class="notice"> <span>弱</span> <span>一般</span> <span>强</span> </div> <script> let text =document.getElementById(‘password‘); let span = document.getElementsByTagName(‘span‘); text.onkeyup =function(){ if(text.value.length !==0 ){ if(text.value.length <= 4){ for (let i=0;i<span.length;i++){ if(i===1||i===2){ span[i].style.backgroundColor = ‘white‘; span[i].style.color = ‘black‘; } else{ span[i].style.backgroundColor = ‘red‘; span[i].style.color = ‘white‘; } } }else if(text.value.length <= 8){ for (let i=0;i<span.length;i++){ if(i===0||i===1){ span[i].style.backgroundColor = ‘orange‘; span[i].style.color = ‘white‘; } else{ span[i].style.backgroundColor = ‘white‘; span[i].style.color = ‘black‘; } } }else{ for (let i=0;i<span.length;i++){ span[i].style.backgroundColor = ‘rgb(45,173,45)‘; span[i].style.color = ‘white‘; } } }else{ for (let i=0;i<span.length;i++){ span[i].style.backgroundColor = ‘white‘; span[i].style.color = ‘black‘; } } } </script> </body> </html>