java代码汇编⼀个熊猫_【每天⼀个⼩案例】实现掘⾦登录框
中的熊猫状态改变...
今天登录掘⾦的时候，发现输⼊⼿机号和密码的时候，上⾯的⼩熊是会有不会形态的。于是登录上掘⾦的第⼀件事情就是把这个⼩案例写了下。我是⽤的最简单的⽅法来写的。有更加简洁的⽅法可以在下⾯评论出来，⼤家⼀起进步。
1. 知识点汇总
1.1 结构
input框的placeholder是作为默认提⽰的
1.2 样式
熊猫定位在盒⼦上⽅ 定位官⽅⽂档学习
1.3 JS交互
思路：
当⼿机号的input框获取到焦点的时候，让‘举⼿’的熊猫显⽰；
当密码的input获取焦点的时候，让‘闭眼’的熊猫显⽰；
当input框都失去焦点的时候让‘趴着’熊猫显⽰；
如何实现图⽚的显⽰：
我们在写CSS样式的时候，让图⽚默认是display:none 隐藏。给图⽚加⼀个类名，在这个类名下加上display:block显⽰的样式。这样后期想让谁显⽰就直接让他加上这个类名即可。
使⽤JS获取到的input和img的索引问题：
‘趴着’的图⽚索引是‘0’input绑定onblur事件
⼿机号的input索引是0 ---- ‘举⼿’的图⽚索引是‘1’
密码的input索引是1 ---- ‘闭眼’的图⽚索引是‘2’
2. 代码实现
需求：熊猫的状态改变
当输⼊⼿机号的时候熊猫的状态是‘举⼿’；
当输⼊密码的时候，熊猫的状态是‘闭眼’；
在其他状态熊猫都是‘趴着’
2.1 结构
复制代码
2.2 样式
* {
margin: 0;
padding: 0;
}
form {
width: 300px;
margin: 100px auto; border: 1px solid #d6d7d5; box-sizing: border-box;
text-align: center;
position: relative;
padding: 20px 0;
}
form .imageBox img { display: none;
width: 100px;
height: 100px;
position: absolute;
top:-76px;
left:91px;
}
form .imageBox img.active { display: block;
}
form .ipt input {
font-size: 15px;
margin-bottom: 20px; border: 1px solid #eee; padding: 5px;
color: #333;
}
form .ipt input:nth-child(2){ margin-bottom: 0;
}
复制代码
2.3 JS交互
图3

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。