本文已参与「新人创作礼」活动，一起开启掘金创作之路。
隐藏密码的小项目
1.效果
2. 代码
<style>
.dox{
position: relative;
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.dox input{
width: 370px;
height: 30px;
border: 0px;
outline: none;
}
.dox img{
position: absolute;
top: 8px;
right: 1px;
width: 20px;
}
</style>
<div class="dox">
<label>
<img src="close-one.png" id="eye"/>
<input type="password" id="pswd"/>
</label>
</div>
<script>
var imgClose = document.getElementById('eye');
var pswd = document.getElementById('pswd');
var flag = 0;
eye.onclick =function(){
if(flag == 0){
pswd.type = 'text';
eye.src = 'open.png';
flag = 1;
}else{
pswd.type = 'password';
eye.src = 'close-one.png';
flag = 0;
}
}
</script>
3.解释
HTML部分
- 在最外层定义了一个盒子设置class属性为dox。
- label：label 元素不会向用户呈现任何特殊效果。但是用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
- img:图片标签，并设置id属性为eye。
- input：为HTML的表单，由于type类型设置为password所以表单中呈现为的密码字段。
css部分 - position:relative 相对定位
- position:absolute 绝对定位
- width 属性设置元素的宽度
- height 设置元素的高度
- top 指定元素的顶部边缘
- right属性规定元素的右边缘
- border-bottom: 1px solid #ccc；设置下边框的样式(1像素，实线，银灰来色)
- margin: 100px auto;设置上下外边距为0px，左右外边距自动
- outline: none;设置元素周围的轮廓，设置为none表示不显示。
js部分
- var imgClose = document.getElementById('eye');
var pswd = document.getElementById('pswd');
①根据指定的id返回获取img元素并赋值给imgClose
②根据指定的id返回获取img元素并赋值给input - var flag = 0; 定义一个变量flag来记录此时处于显示密码的状态还是不显示密码的状态（0对应着显示密码的状态，1对应着不显示密码的状态）
- eye.onclick = 函数
onclick表示鼠标点击左键触发。这里表示点击eye（也就是图片）会触发方法。 - btn.onclick = function(){ //函数体 }
是函数表达式（匿名函数） - if(flag == 1){ //代码块一 }else{ //代码块二 }
若flag等于1的条件成立则执行代码块一的，否则执行代码块二的内容。 - flag = 0;和flag = 1;
目的是实现鼠标每次点击按钮，flag的值在不断切换。从而实现if内代码和else内代码的不断切换。 - pswd.type = 'text';把表单的类型改为文本框。
- eye.src = 'open.png';更改图片路径，从而实现更改图片的目的。
总结
- css的定位，border，outline
- html表单，img
- DOM获取元素
- 函数的使用
- 鼠标点击事件
- if分支结构
