踏遍青山
Log in
Main
Web前端
密码 睁眼开眼的实现
root
abc abc
1
20 Oct
https://cloud.tencent.com/d...
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box { width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; position: relative; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 2px; right: 2px; width: 24px; } </style> <body> <div class="box"> <label for=""> <img src="close.png" alt="" id="eye"> </label> <input type="password" name="" id="pwd"> </div> <script> //1.获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd') //2.注册事件 处理程序 var flag = 0; eye.onclick = function() { //点击一次之后，flag一定要变化 if (flag == 0) { pwd.type = 'text'; flag = 1;//赋值操作 eye.src = 'open.png' } else { pwd.type = 'password'; flag = 0; eye.src = 'close.png' } } </script> </body> </html>
https://cloud.tencent.com/d...
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> .box { width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; position: relative; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 2px; right: 2px; width: 24px; } </style> <body> <div class="box"> <label for=""> <img src="close.png" alt="" id="eye"> </label> <input type="password" name="" id="pwd"> </div> <script> //1.获取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd') //2.注册事件 处理程序 var flag = 0; eye.onclick = function() { //点击一次之后，flag一定要变化 if (flag == 0) { pwd.type = 'text'; flag = 1;//赋值操作 eye.src = 'open.png' } else { pwd.type = 'password'; flag = 0; eye.src = 'close.png' } } </script> </body> </html>