<head>
<style>
.box{
position: relative;
width: 300px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
}
.box input{
width: 250px;
height: 28px;
border:0;
outline: none;
}
.box img{
position: absolute;
width:20px;
top: 8px;
right:7px;
}
</style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/flase.png" alt="" >
</label>
<input type="password" name="" id="">
<script>
var img =document.querySelector('img')
var input =document.querySelector('input')
var flag =0
// 点击一次falg进行变化才行
img.onclick =function(){
if(flag==0){
input.type=Text
img.src="images/open.png"
flag= 1
}else{
input.type='password'
img.src='images/flase.png'
flag = 0
}
}
</script>
原创文章，作者：745907710，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/278131.html