1. 程式人生 > 其它 >用JavaScript實現京東登入頁面的使用者密碼顯示或者隱藏功能

用JavaScript實現京東登入頁面的使用者密碼顯示或者隱藏功能

技術標籤:JSjavascriptcsshtml

用JavaScript實現京東登入頁面的使用者密碼顯示或者隱藏功能

昨天跟著老師學js的Dom和Bom階段時講到了這個經典案例,後來才想起來分享
正在學習大前端中,有程式碼和思路不規範不正確的地方往多多包涵,感謝指教!
這裡我用到的是本地的圖片

程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style> .box{ position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input{ width: 370px; height: 30px; border: 0; outline: none; }
.box img{ width: 24px; position: absolute; top: 2px; right: 2px; } </style> </head> <body> <div class="box"> <label> <img src="../99_images/1.png" alt=""id="eye"
> </label> <input type="password"id="pass"> </div> <script> var img=document.getElementById('eye') var LoginPassword=document.getElementById('pass') var flag=0 eye.onclick=function () { if (flag == 0) { LoginPassword.type = 'text' img.src = '../99_images/1.png' flag = 1 } else { LoginPassword.type = 'password' flag = 0 img.src ='../99_images/2.png' } } </script> </body> </html>

2.用chrome瀏覽器進行演示

input型別為password時顯示效果


點選圖片過後這裡input型別變為text,圖片也相應地發生變化

在這裡插入圖片描述


程式碼解釋

主要的演算法就是定義了一個flag變數,通過點選圖片實現函式的迴圈,從而使flag的值發生變化,讓flag在0,1之間變化,這樣就可以重複點選
這裡div盒子是img元素的父類,要定位img的位置我們用css樣式對其進行設定,這裡用到了子絕父相,將用於點選的圖片放在了輸入框的右側。
父級元素div則設定了個margin:100px auto,讓其水平居中然後距離頂部100畫素的距離,為了讓其更方便看到。
然後輸入密碼過後點選圖片即可以隱藏/顯示密碼,相應的圖片也會發生變化,JD用到的是睜眼和閉眼的圖片,我這裡就敷衍一下,實現這個功能就達成目的了。


作者才開始寫文章,也開開始接觸前端啊!

別噴我,寫的不好就勞煩指點一二,覺得有幫助就留下個大拇指點個關注再走哈哈哈!