1.上课案例
<!DOCTYPE html>
<html>
<head>
<meta charset=";utf-8";>
<title></title>
<style>
.box {
position: relative;
width: 400px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 2px;
}
.box input {
width: 370px;
height: 30px;
border: 0;
outline: none;
}
.box img {
position: absolute;
top: 4px;
right: 6px;
width: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class=";box";>
<label for=";";>
<img src=";images/close.png"; alt=";"; id=";eye";>
</label>
<input type=";password"; name=";"; id=";pwd";>
</div>
<script type=";text/javascript";>
//【案例】显示隐藏密码明文
// 案例分析:在登录页面,为了优化用户体验 ,方便用户进行密码输入。
//因此在设计密码框时,会有一个“眼睛”图片,充当按钮功能,单击可以切换按钮的状态,控制密码的显示和隐藏。
//实现步骤如下:
// 准备一个父盒子div
// 在父盒子中放入两个子元素,一个input元素和一个img元素
// 单击眼睛图片切换input的type值(text和password)
/Ǘ.获取元素
var pwd=document.querySelector(";#pwd";);
var img1=document.querySelector(";#eye";);
/ǘ.注册事件处理程序
var i=true;
img1.onclick=function(){
if(i==true){
pwd.type=";text";;
img1.src=";images/open.png";;
i=false;
}
else if(i==false)
{
pwd.type=";password";;
img1.src=";images/close.png";;
i=true;
}
}
</script>
</body>
</html>
效果图