在輸入密碼框中眼睛睜開可以看見數字，眼睛閉上看不見數字怎么用JS實現

無論做那個項目，登錄注冊頁面總是避免不了的，那怎么用js來控制密碼的顯示和隱藏呢？先看一下效果圖：

HTML代碼如下：

<div>
         <label for="password">
               <input type="password" id="password" placeholder="請輸入密碼" maxlength="12" value="" autocomplete="off">
              <span class="login__pwdnotShow___3kxE7" id="lyypd"></span>
         </label>
 </div>

JS代碼如下：

<script type="text/javascript">
           window.onload=function(){
               var input=document.getElementById("password")
               var eyes=document.getElementById("lyypd")
                 eyes.onclick=function(e){
                     var btn=e.target.className    //e.target是找到了鼠標點擊事件的DOM元素
                     if(btn === 'login__pwdnotShow___3kxE7'){
                         input.type="text"
                         e.target.className="login__pwdShow___3dPhS"
                     }
                     else if(btn === 'login__pwdShow___3dPhS'){
                         input.type="password"
                         e.target.className="login__pwdnotShow___3kxE7"
                     }
                 }
           }
  </script>

解釋：代碼放置在window.onload的事件處理函數中，只有當文檔加載完成后，才會執行事件處理函數，如果js放在div上面，則需放在window.onload的事件處理函數中才能顯示效果