具體代碼如下：
?<!-- 只需要一個input密碼框和一張圖片即可 -->
? ? <div>
? ? ? ? <input type="password" class="box1">
? ? ? ? <img src="./閉眼.png" alt="" class="t1">
? ? </div>
? ? <script>
? ? ? ? var box = document.querySelector('div')
? ? ? ? //聲明一個變量box风秤，使用document.querySelector ('div') 獲取div
? ? ? ? //接著給div添加樣式讓其居中顯示
? ? ? ? box.style.width = '600px'
? ? ? ? box.style.height = '400px'
? ? ? ? box.style.margin = '0 auto'
? ? ? ? var box1 = document.querySelector('.box1')
? ? ? ? //給input聲明一個變量box1呢簸，使用document.querySelector('.box1') 獲取input
? ? ? ? box1.style.width = '400px'
? ? ? ? box1.style.height = '50px'
? ? ? ? box1.style.outline = 'none'//讓其不獲取焦點
? ? ? ? var img = document.querySelector('img')
? ? ? ? //給img聲明一個變量，使用document.querySelector('img') 獲取img
? ? ? ? img.onclick = function () {//給img添加點擊事件
? ? ? ? ? ? if (box1.type ==='text') {//判斷input的是文本框的時候
? ? ? ? ? ? ? ? box1.type = 'password'//將其文本框改為密碼框
? ? ? ? ? ? ? ? img.src="./閉眼.png"http://圖片為閉眼窘俺，讓其呈現(xiàn)暗文的效果
? ? ? ? ? ? }else{//若為密碼框時就將其改為文本框
? ? ? ? ? ? ? ? box1.type = 'tetx'
? ? ? ? ? ? ? ? img.src="./睜眼.png"http://圖片為睜眼让歼，讓其呈現(xiàn)明文的效果
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
