1 案例说明与效果图

【案例】显示隐藏的密码明文

案例分析：在登录页面，为了优化用户体验，方便用户进行密码输入。因此在设计密码框时，会有一个“眼睛”图片，充当按钮功能，单击可以切换按钮的状态，控制密码的显示和隐藏。

效果图如下：

2 编写HTML结构，完成页面布局

首先，现在页面中设计出我们想要的元素：输入框和图片，html设计步骤如下：

1、准备一个父盒子div，并且给它的id属性命名为box；
2、在父盒子中放入两个子元素：①input元素：type为password，id为pwd；②img元素：地址为眼睛闭合图片，id为eye；

代码如下：

    <div id="box"><!--密码框--><input type="password" id="pwd"><!--眼睛图片 --><img src="../images/close.png" id="eye"></div>

效果图：

3 编写CSS样式

编写css样式，设置输入框的长和宽，以及将图片定位在密码框的右边，css样式设计步骤如下：

1、设置#box的样式：①设置宽度、边框、外边距和内边距，让盒子的外观好看；②设置相对定位，与之后图片设置绝对定位相关（之后解释）。
2、设置input的样式：①设置宽度、高度、边框；②设置outline为none，移除浏览器的默认聚焦样式；
3、设置图片样式：①设置图片绝对定位，因为图片的父容器box设置了相对定位，因此这里的绝对定位是相对于父容器box的位置来进行定位的；②设置图片的宽度，让图片保持适宜的尺寸；③当鼠标放在图片上时，设置为手的状态。

代码如下：

    /* 为div设置样式 */#box {width: 400px;border: 1px solid #ccc;margin: 100px auto;padding: 1px;position: relative;}

    /* 为input设置样式 */#box input {width: 370px;height: 30px;border: 0;/* 清除浏览器默认的聚焦样式 */outline: none;}

    /* 为img设置样式 */#box img {position: absolute;top: 4px;right: 6px;width: 24px;/* 把鼠标的样式换成小手 */cursor: pointer;}

4 编写JavaScript代码

利用JavaScript代码来设置点击事件，完善功能，JavaScript设计步骤如下：

1、获取页面中的元素：input和img，设置标记变量，标记图片的开关，标记变量默认为0，即图片是关上的；
2、注册事件，定义事件处理程序：当标记变量等于0时，点击后眼睛打开，密码被显示，标记变量为1；当标记变量为1时，点击后眼睛关闭，密码关闭，标记变量为0。

代码如下：

        //1、获取元素var pwd = document.getElementById("pwd");var eye = document.getElementById("eye");var flag = 0;//默认眼睛是关上的//2、注册事件，定义事件处理程序eye.onclick = function () {if (flag == 0) {//当眼睛是闭上的时候，点击后：pwd.type = "text";//密码框样式换成文本，即可显示密码eye.src = "../images/open.png";//图片地址修改为眼睛打开的图片flag = 1;} else {pwd.type = "password";//文本框换成密码框eye.src = "../images/close.png";//图片换成闭眼的flag = 0;}}

到这里，这个密码框就制作完成了。

5 总代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<style>/* 为div设置样式 */#box {width: 400px;border: 1px solid #ccc;margin: 100px auto;padding: 1px;position: relative;}/* 为input设置样式 */#box input {width: 370px;height: 30px;border: 0;/* 清除浏览器默认的聚焦样式 */outline: none;}/* 为img设置样式 */#box img {position: absolute;top: 4px;right: 6px;width: 24px;/* 把鼠标的样式换成小手 */cursor: pointer;}
</style><body><div id="box"><!--密码框--><input type="password" id="pwd"><!--眼睛图片 --><img src="../images/close.png" id="eye"></div><script>//1、获取元素var pwd = document.getElementById("pwd");var eye = document.getElementById("eye");var flag = 0;//默认眼睛是关上的//2、注册事件，定义事件处理程序eye.onclick = function () {if (flag == 0) {//当眼睛是闭上的时候，点击后：pwd.type = "text";//密码框样式换成文本，即可显示密码eye.src = "../images/open.png";//图片地址修改为眼睛打开的图片flag = 1;} else {pwd.type = "password";//文本框换成密码框eye.src = "../images/close.png";//图片换成闭眼的flag = 0;}}</script>
</body></html>

JavaScript+css+html通过点击右边眼睛的开关来控制密码显示还是隐藏相关推荐

密码显示与隐藏效果 html+css+js
先看效果: 前言: 一般在我们要输入密码的时候都可以让自己输入的密码显示或者隐藏,所以我做了一个简约的密码框~ 实现: 定义html的输入框的标签,kuang为底层盒子,password为输入框,co ...
JS(JavaScript)入门设置密码框中点击小眼睛显示隐藏所输入的密码！
表单中点击小眼睛显示隐藏密码框中的密码! 准备: 1.两张png图片,一张睁眼,一张闭眼,可以到阿里巴巴矢量图库寻找(免费下载) 网站链接 https://www.iconfont.cn/ 最终效果图 ...
javascript的原型，原型链，内置对象拖曳对话框放大镜显示和隐藏遮挡层及大层
图片跟着鼠标飞 1.<!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
css控制div显示／隐藏方法及２种方法比较原码[转]
CSS中的display和visibility css中display和visibility语法,他们都可以隐藏和显示html元素.看齐来他们很相似,所以很多人还是会搞错. 谈们的属性分别如下: di ...
控制元素显示和隐藏的方式及区别、内容溢出处理(区域滚动)、透明性、字体图标、常见字体、自定义字体设计、网站图标、CSS代码分析
元素的显示与隐藏: 常见控制元素的显示和隐藏的属性有display.visibility.overflow,需要清楚的理解三者之间的区别. display显示: 当值为none时为销毁对象,不保留原位 ...
js和jq实现点击小眼睛后密码显示与隐藏切换
效果(要求) 眼睛的图标这里是使用了阿里巴巴图标库的图标. js实现 <!DOCTYPE html> <html lang="en"><head> ...
html制作自动切换音乐按钮代码,HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
我们都知道HTML5给我们提供了"controls"这个插件,可是这个插件却比较丑,还不能实现上一首下一首的播放,以及进度条的手动改变等功能,那么如何自己设计一个控制音乐播放的控制 ...
在微信小程序里，实现点击框里的眼睛图标时密码显示与隐藏切换
大家自己脑补一下,就是当你输入QQ密码时的一些展示和操作具体看代码,亲测真机模拟有效(具体看GIF) 还有还有,一开始想的用type,但网上都说真机不成功,所以也就不试了,下面这种方法也是借鉴CSD ...
html jq 控制显示密码,js、jquery分别实现点击密码输入框密码显示和隐藏
很多密览始不次这得是觉砖怎可我滚脑选的方近器上码框都有个眼睛标记,点击能显示密码.原理就是点击切换password为te要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高 ...

JavaScript+css+html通过点击右边眼睛的开关来控制密码显示还是隐藏

显示隐藏的密码

1 案例说明与效果图

2 编写HTML结构，完成页面布局

3 编写CSS样式

4 编写JavaScript代码

5 总代码

JavaScript+css+html通过点击右边眼睛的开关来控制密码显示还是隐藏相关推荐

最新文章

热门文章