使用js仅实现密码框信息的显示是简单的，重点在点击显示密码后再实现点击隐藏的效果
这里通过标记法实现。定义了一个flag=false的变量，在编写点击效果时，使!flag，此时flag=true，进行判断，true时实现显示效果，false时实现隐藏效果。
代码如下：
<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><style>#box{width: 300px;height: 40px;position: relative;}#password{width: 300px;height: 30px;}#box div{width: 20px;height: 20px;position: absolute;background: url(./icon_1.png) no-repeat;top: 7px;right: 10px;}#box div.hover{background: url(./icon_2.png) no-repeat;}</style></head><body><div id="box"><div id="img"></div><input type="password" name="" id="password"></div><script>var img = document.querySelector('#img');var input = document.querySelector('#password');var flag = false;img.onclick = function(){flag = !flag;if(flag){this.className = 'hover';input.type = 'text';}else{this.className = '';input.type = 'password'; }}</script></body>
效果如下：
如果觉得《JavaScript实现登录密码的显示和隐藏》对你有帮助，请点赞、收藏，并留下你的观点哦！
