隐藏密码的小项目

效果

代码实现

		<style>
		.dox{
			position: relative;
			width: 400px;
			border-bottom: 1px solid #ccc;
			margin: 100px auto;
		}
		.dox input{
			width: 370px;
			height: 30px;
			border: 0px;
			outline: none;
		}
		.dox img{
			position: absolute;
			top: 8px;
			right: 1px;
			width: 20px;
		}
		</style>
			<div class="dox">
			<label>
				<img src="close-one.png" id="eye"/>
				<input type="password" id="pswd"/>
			</label>
			</div>
			<script>
			var imgClose = document.getElementById('eye');
			var pswd = document.getElementById('pswd');
			var flag = 0;
			eye.onclick =function(){
				 if(flag == 0){
					 pswd.type = 'text';
					 eye.src = 'open.png';
					 flag = 1;
				 }else{
					 pswd.type = 'password';
					 eye.src = 'close-one.png';
					 flag = 0;
				 }
			}
			</script>