输入密码时点击明文密文变化

        <style>
			.box{
				position: relative;
				width: 400px;  //宽度
				border-bottom: 1px solid #ccc;  //设置下边框
				margin: 100px auto ;
			}
			.box input{
				width: 370px;  //输入框宽度
				height: 30px;  //高度
				border: 0;   //输入框边框0
				outline: none;
			}
			.box img{
				position: absolute; //子绝父相
				top: 10px;
				right: 2px;
				width: 20px;
			}
		</style>

CSS代码展示

       <div class="box">
			<label>
				<img src="img/bi.jpg" id="tu" />
			</label>
			<input type="password " id="pwd" />
		</div>

HTML代码

       <script>
			var tu = document.getElementById('tu');  //获取tu和pwd
			var pwd = document.getElementById('pwd');
			var flag = 0;  //定义一个flag
			tu.onclick = function(){
                    //判断
				if(flag == 0){
					pwd.type = "text";
					tu.src = "img/zheng.jpg";
					flag = 1;
				}else{
					pwd.type = "password";
					tu.src = "img/bi.jpg";
					flag = 0;
				}
			}
		</script>

首选还是利用id获取tu和pwd

赋值一个flag=0

设置点击事件

利用if语句判断，如果flag==0，则点击后变成明文，即pwd.type样式改成文本框text，同时赋值flag=1

反之，如果flag==1，则点击后变成密文，即pwd.type样式改成文本框password，同时赋值flag=0

注：仅限于个人理解，用于学习。