1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <body>
    8.         <style>
    9.             .father {
    10.                 position: relative;
    11.                 width: 300px;
    12.                 height: 40px;
    13.             }
    15.             input {
    16.                 width: 300px;
    17.                 height: 40px;
    18.             }
    20.             span {
    21.                 position: absolute;
    22.                 top: 9px;
    23.                 right: 3px;
    24.             }
    25.         </style>
    26.         <div class="father">
    27.             <input type="password" name="pwd" id="pwd" />
    28.             <span><img src="img/小人头.png" width="24px" height="24px"></span>
    29.         </div>
    31.         <script>
    32.             /*
    33.              * (1)核心思路：点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码
    34.              * (2)一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框架
    35.              * (3)算法：利用一个flag变量，设置为0，来判断flag的值，如果是0，就切换为密码框，如果是                                     1，就切换为文本框，
    36.              */
    37.             //获取事件源
    38.             var input=document.querySelector("#pwd");
    39.             var img=document.querySelector("img");
    41.             var flag=0;        
    42.             img.onclick=function(){
    43.                 if(flag==1){
    44.                     input.type="password";
    45.                     img.src="img/小人头.png";
    46.                     flag=0;
    47.                 }
    48.                 else {
    49.                     input.type="text";
    50.                     img.src="img/小设置.png";
    51.                     flag=1;
    52.                 }                
    53.             }
    54.         </script>
    55.     </body>
    56. </html>