- 首先,上页面展示以及代码实现
- 其次,附上实现代码的相关知识点
首先
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>
- js
//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. 因为我们文档网页从上往下加载,所以先得有标签,所以我们script写到标签的下面 //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 鼠标按下触发 -
嗯嗯嗯!!!我写滴咋样哩?????
立马手动点赞鼓励!!!
欢迎大家找我交流哦噢噢噢噢,嘻~!拜~