1. 程式人生 > 其它 >js密碼轉換為明文通用模板

js密碼轉換為明文通用模板

js密碼明暗文顯示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box{
				position: relative;
				width: 400px;
				border-bottom: 1px solid #ccc;
				margin: 100px auto;
			}
			.box input{
				width
: 370px; height: 30px; border: 0; outline: none; } .box img{ width: 24px; position: absolute; top:2px; right: 2px; width: 24px; }
</style> </head> <body> <div class="box"> <label for=""> <img src="
img/close.png"
alt="" id="eye" />
</label> <input type="password" name="" id="pwd" value="" /> </div> <script type="text/javascript"> //1.獲取元素 var eye=document.getElementById('eye'); var pwd=
document.getElementById('pwd'); //2.註冊事件 處理程式 var flag=0; //演算法利用flag變數,來判斷flag的值,如果是1就切換為文字框,flag設定為0,如果是0就切換為密碼框,flag設定為1 eye.onclick=function(){ //點選一次之後,flag一定要變化 if(flag==0){ pwd.type='text'; eye.src='img/open.png'; flag=1; }else{ pwd.type='password'; eye.src='img/close.png'; flag=0; } }
</script> </body> </html>

圖片素材
open
close