要求：

点击按钮将密码框切换为文本框，并可以查看密码明文。
仿京东显示密码.png

核心思路：

①点击眼睛按钮，把密码框类型type改为文本框就可以看见里面的密码。
②一个按钮两个状态，点击一次切换为文本框，再点击一次切换为密码框。
③算法：因为一个按钮两个状态，利用一个flag变量，来判断flag的值，如果是1就切换为文本框，然后flag设置为0，如果是0就切换为密码框，然后flag设置为1.

  1. <style><br />        *{<br />            margin: 0;<br />            padding: 0;<br />        }<br />        .box{<br />            width: 400px;<br />            border-bottom: 1pxsolid#ccc;<br />            margin: 100pxauto;<br />            position: relative;<br />        }<br />        .box input{<br />            width: 370px;<br />            height: 30px;<br />            border: 0;<br />            outline: none;<br />        }<br />        .box label img{<br />            width: 24px;<br />            position: absolute;<br />            top: 2px;<br />            right: 2px;<br />        }<br />    </style><br /></head><br /><body><br />    <div class="box"><br />        <label for=""><imgsrc="./img/img一、4.06/close.png" alt="" id="eye"></label><br />        <input type="password" name="" id="pwd"><br />    </div><br />    <script><br />        //获取元素<br />        var eye = document.getElementById('eye');<br />        var pwd = document.getElementById('pwd');<br />        //绑定事件，处理程序<br />        var flag = 0;//**当一个东西重复来回切换时，就用这个方法**<br />        eye.onclick = function () {<br />            if(flag == 0){//如果是0就切换为文本框<br />                eye.src = "./img/img一、4.06/open.png";<br />                pwd.type = 'text';<br />                flag = 1;<br />            }else{<br />                eye.src = "./img/img一、4.06/close.png";<br />                pwd.type = 'password';<br />                flag = 0;<br />            }<br />        }<br />    </script><br /></body>

.