js密碼轉換為明文通用模板
阿新 • • 發佈:2021-05-07
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>
圖片素材