实现掘金登录框中熊猫状态的改变案例

今天登录掘金的时候，发现输入手机号和密码的时候，上面的小熊是会有不会形态的。于是登录上掘金的第一件事情就是把这个小案例写了下。我是用的最简单的方法来写的。有更加简洁的方法可以在下面评论出来，大家一起进步。

1. 知识点汇总

1.1 结构

input框的placeholder是作为默认提示的

1.2 样式

熊猫定位在盒子上方定位官方文档学习

1.3 JS交互

思路：

当手机号的input框获取到焦点的时候，让‘举手’的熊猫显示；
当密码的input获取焦点的时候，让‘闭眼’的熊猫显示；
当input框都失去焦点的时候让‘趴着’熊猫显示；

如何实现图片的显示：

我们在写CSS样式的时候，让图片默认是display:none 隐藏。给图片加一个类名，在这个类名下加上display:block显示的样式。这样后期想让谁显示就直接让他加上这个类名即可。

使用JS获取到的input和img的索引问题：

‘趴着’的图片索引是‘0’
手机号的input索引是0 ---- ‘举手’的图片索引是‘1’
密码的input索引是1 ---- ‘闭眼’的图片索引是‘2’

2. 代码实现

需求：熊猫的状态改变

当输入手机号的时候熊猫的状态是‘举手’；
当输入密码的时候，熊猫的状态是‘闭眼’；
在其他状态熊猫都是‘趴着’状态

2.1 结构

<form><div class='imageBox'><img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" alt="" class='active'><img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" alt=""><img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" alt=""></div><div class="ipt"><input type="text" placeholder="输入手机号"><input type="password" placeholder="输入密码"></div>
</form>

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交互

let imageBoxs = document.querySelectorAll('img'),ipts = document.querySelectorAll('input');for (let j = 0; j < ipts.length; j++) { ipts[j].onfocus = function () {  //获取焦点做的事情get(j+ 1);                   //索引对应相应的图片};ipts[j].onblur = function () {  //失去焦点做的事情clear();}
}
function get(index) {for (let i = 0; i < imageBoxs.length; i++) {imageBoxs[i].className = '';       //先清除所有的类名}imageBoxs[index].className = 'active';  //为相应的图片加上类名
}
function clear(index) {for (let i = 0; i < imageBoxs.length; i++) {  imageBoxs[i].className = '';         //清除所有类名}imageBoxs[0].className = 'active';        //让‘趴着’熊猫加类名
}

3. 实现效果

4. 总结

这个案例其实就是对JS中函数、input事件的一个简单应用，没有什么难度，但是最重要的是编程思想的养成，善于总结我们写过的每一个案例。加油！

实现掘金登录框中熊猫状态的改变案例相关推荐

html写登录框中的字,一个登录界面的PS设计和HTML/CSS实现
这样的登录界面可用在网站.桌面软件.Web软件等上面,你可以根据自己的需求改变界面配色.好的,先看看界面最终设计的效果: 1.创建登录界面的背景在Photoshop中,选择"圆角矩形工具& ...
Vue前端项目-登录组件-登录框界面
目录 1.登录框组件设计 1.1 表单元素组件注册 1.2 登录组件的结构和样式 2.Icon 图标 2.1 拷贝 font 文件夹到 asserts 目录 2.2 引入 font 的 css 样式 ...
vue2中vuex状态管理的理解（菜单面包板）
本片理解基于vue2对应的Vuex文档,结合了官网文档以及众多前辈大佬所发布的帖子,由衷表示感谢. vuex的超详细讲解和具体使用细节记录随着我们进一步扩展约定,即组件不允许直接变更属于 store ...
熊猫数据集_处理熊猫数据框中的列表值
熊猫数据集 Have you ever dealt with a dataset that required you to work with list values? If so, you will ...
python怎么索引txt数据中第四行_python-在熊猫数据框中按行计数编制索引
我有一个带有两个元素的层次结构索引的"熊猫"数据框(" month"和" item_id").每行表示特定月份的特定项目,并具有用于关注多个 ...
如何设置textarea文本框中的内容为只读不可修改状态
设置<textarea>文本框中的内容为只读不可修改状态,只需要加入disabled或readonly即可 <textarea name="qualification&qu ...
PyQt5教程(十一)——实现QQ登录界面（五、实现密码框中的小键盘图标）
PyQt5教程(十一)--实现QQ登录界面(五.实现密码框中的小键盘图标) 上篇文件,我们添加了qss样式表,其中也添加了登录界面密码框中的小键盘按钮资源风格. PyQt5教程(十)--实现QQ登录界 ...
PHP中select框不同用户登录,首页登录后怎么在首页显示用户名以及隐藏登录框？...
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 index.php: 登录页面用户名: 密码: 没有账号?立即注册 -------------------------- doaction.php: h ...
vue判断input框中的checkbox(单选)是否为选中状态
开发购物车项目中需要判断商品是否选中或者取消.开始使用的是Vant-ui中的 van-checkbox 组件,因为van-checkbox无法获取v-model中的状态值后来就直接使用input写了 ...