<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title><style>.box { position: relative; width: 400px; border-bottom: 1pxsolid#ccc; margin: 100pxauto; } .boxinput { width: 370px; height: 30px; border: 0; outline: none; } .boximg { position: absolute; top: 2px; right: 2px; width: 24px; } </style></head><body><divclass="box"><labelfor=""><imgsrc="images/close.png"alt=""id="eye"></label><inputtype="password"name=""id="pwd"></div><script>// 1. 获取元素vareye=document.getElementById('eye'); varpwd=document.getElementById('pwd'); // 2. 注册事件 处理程序varflag=0; eye.onclick=function() { // 点击一次之后， flag 一定要变化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>
