首页利用JavaScript书写代码并用HTML格式:制作一个能显示和隐藏密码明文的简单网页

利用JavaScript书写代码并用HTML格式:制作一个能显示和隐藏密码明文的简单网页

时间: 2024-05-12 17:13:04 浏览: 13

可以尝试以下代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Show/Hide Password</title> <script> function togglePasswordVisibility() { var passwordInput = document.getElementById("password"); if (passwordInput.type === "password") { passwordInput.type = "text"; } else { passwordInput.type = "password"; } } </script> </head> <body> <h1>Show/Hide Password</h1> <label for="password">Password:</label> <input type="password" id="password"> <br> <input type="checkbox" id="showPassword" onchange="togglePasswordVisibility()"> <label for="showPassword">Show password</label> </body> </html> ``` 这里使用了一个简单的 JavaScript 函数 `togglePasswordVisibility()` 来切换密码输入框的类型。当复选框被选中时，密码输入框的类型被设置为“text”，从而显示密码明文；当复选框被取消选中时，密码输入框的类型被设置回“password”，从而隐藏密码明文。复选框的状态变化时会触发 `onchange` 事件，从而调用 `togglePasswordVisibility()` 函数。