First look at the effect:
display:
page:
<div class="login">
<h3>用户注册</h3>
<div class="user">
<img class="user_icon" src="/img/user.png">
<input type="text" placeholder="请输入用户名">
</div>
<div class="pas">
<img class="pas_icon" src="/img/pas.png">
<input type="password" class="userpas" placeholder="请输入密码">
<img class="hide_icon" src="/img/hide.png">
</div>
</div>
css style:
<style>
.login{
width: 400px;
height: 300px;
margin: 0 auto;
}
h3{
text-align: center;
color: palevioletred;
}
.user{
width: 400px;
height: 30px;
border-bottom: 1px solid palevioletred;
margin: 20px 0;
position: relative;
}
.user input{
width: 90%;
height: 30px;
outline: none;
padding: 0;
border: none;
float: right;
}
.user .user_icon{
width: 18px;
height: 18px;
position: absolute;
top: 5px;
left: 2px;
}
.pas{
width: 400px;
height: 30px;
border-bottom: 1px solid palevioletred;
margin: 20px 0;
position: relative;
}
.pas input{
width: 90%;
height: 30px;
outline: none;
padding: 0;
border: none;
float: right;
}
.pas .pas_icon{
width: 18px;
height: 18px;
position: absolute;
top: 5px;
left: 2px;
}
.pas .hide_icon{
width: 18px;
height: 18px;
position: absolute;
top: 5px;
right: 2px;
}
</style>
JS operates dom elements:
<script>
var hide =document.getElementsByClassName('hide_icon')
var pas=document.getElementsByClassName('userpas')[0]
var flag=0
hide[0].onclick=function(){
if(flag==0){
pas.type='text'
this.src="/img/show.png"
flag=1
}else{
pas.type='password'
this.src="/img/hide.png"
flag=0
}
}
</script>