<!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>总结
以上是内存溢出为你收集整理的密码强度检查小练习全部内容，希望文章能够帮你解决密码强度检查小练习所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）