前言
最近一直在公司写文档类的工作,挺枯燥的,搞得整个人情绪比较低落。突然想到自己好像很久都没写代码了,所以就重温了一下密码框效果用js实现的方法。记录一下“美好”生活。
源码
附上源码,不够如果不是很熟练的话还是建议大家手打一遍,熟能生巧!
<!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>密码框效果实现</title>
<style type="text/css">
div{
width: 600px;
margin: 100px auto;
}
.pwdmsg{
background-image: url(img/11.png);
background-repeat:no-repeat;
background-position: left center;
color:black;
display: inline-block;
padding-left: 20px;
}
.right{
background-image: url(img/申请.png);
background-repeat: no-repeat;
color: green;
}
.wrong{
background-repeat: no-repeat;
background-image: url('img/通知.png');
color: red;
}
</style>
</head>
<body>
<div class="header">
<input type="password" id="pwd">
<p class="pwdmsg">请输入6-16位密码</p>
</div>
<script>
var pwd=document.querySelector('#pwd');
var aa=document.querySelector('.pwdmsg');
pwd.onblur= function(){
if(this.value.length>16 || this.value.length<6){
aa.innerText='密码错误,请输入6-16位密码';
aa.className='pwdmsg wrong';
}else{
aa.className='pwdmsg right';
aa.innerText='密码格式正确';
}
}
</script>
</body>
</html>
代码编写思路
- 密码框效果事件为失去焦点事件,当鼠标离开密码框且点击任意位置就会触发事件
- 输入密码点击任意位置出现提示,且该提示是由密码长度来决定的,所以重要的一步是获取密码框内密码的长度
- 根据长度经过判读给出不同的提示与效果
结语
background-image哪里我是随便找了图片的,按照源码的话图片像素20*20就够了,太大了显示不出来!