请通过JavaScript实现显示或隐藏密码。要求:使用input表单设置文本域或密码域,使用img标签可以使用属性src设置查看图片和隐藏图片。使用DOM(文档对象模型)绑定img元素后,然后img的onclick点击事件,通过if选择结构,控制显示或隐藏密码。
时间: 2024-03-24 22:39:58 浏览: 88
好的,下面是一个简单的示例代码,可以实现显示或隐藏密码:
HTML代码:
```html
<label>密码:</label>
<input type="password" id="password">
<img src="show.png" id="showHide" alt="显示密码">
```
JavaScript代码:
```javascript
const passwordInput = document.getElementById('password');
const showHideButton = document.getElementById('showHide');
showHideButton.onclick = function() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
showHideButton.src = 'hide.png';
showHideButton.alt = '隐藏密码';
} else {
passwordInput.type = 'password';
showHideButton.src = 'show.png';
showHideButton.alt = '显示密码';
}
};
```
在这个例子中,我们使用了HTML中的`input`元素来创建密码输入框,并使用`img`元素来显示或隐藏密码。我们使用了JavaScript中的`document.getElementById`函数来获取这些元素,并将`onclick`事件绑定到`showHideButton`元素上。在点击按钮时,我们将检查密码输入框的`type`属性,如果它是`password`,则将其更改为`text`,并将显示/隐藏图像更改为“隐藏密码”。否则,我们将`type`属性更改回`password`,并将图像更改为“显示密码”。
阅读全文