JS实现密码的显示与隐藏（仿京东登录界面）

最新推荐文章于 2024-05-10 07:20:20 发布

牛小小小婷～

最新推荐文章于 2024-05-10 07:20:20 发布

阅读量2k

点赞数 8

文章标签： js javascript css 算法

本文链接：https://blog.csdn.net/hannah2233/article/details/118879323

版权

首先，上页面展示以及代码实现
其次，附上实现代码的相关知识点

首先

1. 页面展示

在这里插入图片描述

2. js的实现思路

点击眼睛，把密码框类型改为文本框就可以看见里面的密码
一个按钮两个状态，点击一次，切换为文本框，继续点击切换成密码框
算法：利用一个flag变量，来判断flsg的值，如果是1就切换成文本框，flag设置为0；如果是0就切换成密码框，flg设置为1

3. 代码实现

html+css

<div class="box">
       <label for="">
           <img src="./img/close.png" alt="" id="eye">
       </label>
       <input type="password" name="" id="pwd">
</div>

<style>
       .box {
           width: 400px;
           border-bottom: 1px solid #ccc;
           margin: 100px auto;
           position: relative;
       }
       
       .box input {
           width: 370px;
           height: 30px;
           border: none;
           /* 鼠标聚焦在框框上的时候就没有蓝色边框了 */
           outline: none;
       }
       
       .box img {
           position: absolute;
           top: 2px;
           right: 2px;
           width: 24px;
       }
</style>

//1. 获取元素
       var eye = document.getElementById('eye');
       var pwd = document.getElementById('pwd');
       //2. 注册事件
       var flag = 0;
       eye.onclick = function() {
           // 点击一次之后，flag一定要变化
           if (flag == 0) {
               pwd.type = 'text';
               eye.src = './img/open.png';
               flag = 1;
           } else {
               pwd.type = 'password';
               flag = 0;
               eye.src = './img/close.png';
           }
       }

首先之后

我再嘚拨嘚两句：关于如何从网页上扒图。这次拿京东的手机版登录界面进行讲解

照常，先上动图：

我要吐槽哈，就冲这个动图浪费我的时间也必须得给我点个赞，我截了有5遍，文件太大，就是上传不成功。哪位小哥有截取动图的更好的方法，评论区教教我，嘿嘿嘿嘿~~~

- 第一步，F12或者右击‘检查’—>打开控制台
- 第二步，打开图片网址，然后复制图像即可（案例中睁眼闭眼背景扒取之后是黑色的，贼拉奇怪；大家也可以去阿里矢量图库上找图标哒，okkk）

其次相关笔记的补充

1-1 获取元素

以下笔记的中的所有log均为console.log(笔者为了方便，部分内容采用了简写，哪里不清楚的话欢迎大家提出问题，看到回复会灰奔来为你解答滴！！！)

根据ID获取

使用getElementById（）方法可以获取带有ID的元素对象

//1. 因为我们文档网页从上往下加载，所以先得有标签，所以我们ｓｃｒｉｐｔ写到标签的下面
//2. get获得element元素by通过驼峰命名
//3. 参数id是大小写敏感的字符串
//4. 返回元素对象
<div id = "time">2019-9-9</div>
<script>
	var timer = document.getElementById('time');
</script>
log(timer);
log(typeof timer);
//console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
console.dir(timer);

根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

<body>
	<ul>
        <li>知否知否</li>
        <li>知否知否</li>
    </ul>
    <ol id="ol">
    	<li>生僻字</li>
    	<li>生僻字</li>
    </ol>
    <script>
    	//1. 返回的是 获取过来元素对象的集合，一维数组，以伪数组的形式存储
    	var lis = document.getElementsByTagName('li');【document获取的是整个页面的所有li标签的】
    	log(lis);
    	log(lis[0]);
    	//2. 我们想要的一次打印里面的元素对象我们可以采取遍历的方式
    	for( var i = 0;i < lis.length; i++){
    	log(lis[i]);
    	}
    	//3. 如果页面中只有一个li，返回的还是伪数组的形式
    	//4. 如果页面中没有这个元素，返回是的空的伪数组的形式
    	//5. 获取某个元素(父元素)内部所有指定标签名的子元素
    	var ol = document。getElementsByTagName('ol');     //[ol]
    	XXXXXXlog(ol.getElementsByTagName('li'));XXXXXX        //【这是错的】
    	log(ol[0].getElementsByTageName('li'));     //[li,li,li,li]
    	
    	//5. 直接利用的父元素的id名
    	var ol = document.getElementById('ol');
    	console.log(ol.getElementByTagName('li'));     //[li,li,li,li]
    </script>
</body>

// 5. 获取某个元素(父元素)内部所有指定标签名的子元素,注意：父元素必须是单个对象（指明是哪一个元素对象），获取的时候不包括父元素自3己

通过类名来获取（HTML5新增的方法，不兼容IE6，7，8）

语法
- 方法一： querySelector返回指定选择器的第一个元素对象,切记，里面的选择器需要加符号，.box,#red
```
document.querySelector('选择器');   //返回指定选择器的第一个元素对象
//例子： document.querySelector('.box')
```
- 方法二： querySelectorAll()返回指定选择器的所有元素对象的集合
```
var allBox = document.querySelectorAll('.box');
```
- 方法三： getElementsByClassName根据类名获得某些元素集合
```
  document.getElementsByClssName('类名');   //根据类名返回元素对象集合
```

例子：

<div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

var boxs = document.getElementsByClassName('box');
        console.log(boxs);

1-2 事件三要素及执行事件

事件概述：JavaScript是我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为
- 理解：触发-----响应机制
事件有三部分组成：事件源，事件类型，事件处理程序；称之为事件三要素
- 事件源：事件被触发的对象；（谁：按钮）
```
var btn = document.getElementById('btn');
```
- 事件类型：（如何触发，即什么事件比如[鼠标点击]【onclick】还是[鼠标经过]还是[键盘按下]）
- 事件处理程序：通过函数赋值的方式来完成
```
btn（事件源）.onclick（事件类型）= function() {
	alert('点秋香');
}
```

执行事件的步骤

获取事件源
注册事件（绑定事件）

添加事件处理程序（采取函数的形式）

<div>我被选中了</div>
<script>
		//获取事件源
        var div = document.querySelector('div');
        //绑定事件，并添加事件处理程序
        div.onclick = function(){
            console.log('我被选中了');
        }
</script>

常见的鼠标事件：

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

嗯嗯嗯！！！我写滴咋样哩？？？？？
立马手动点赞鼓励！！！
在这里插入图片描述
欢迎大家找我交流哦噢噢噢噢，嘻~！拜~

牛小小小婷～

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
JS实现密码的显示与隐藏（仿京东登录界面）

首先，上页面展示以及代码实现其次，附上实现代码的相关知识点首先1. 页面展示2. js的实现思路点击眼睛，把密码框类型改为文本框就可以看见里面的密码一个按钮两个状态，点击一次，切换为文本框，继续点击切换成密码框算法：利用一个flag变量，来判断flsg的值，如果是1就切换成文本框，flag设置为0；如果是0就切换成密码框，flg设置为13. 代码实现html+css<div class="box"> <label for=""&gt..
复制链接

扫一扫