<!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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。