使用JS模仿密码框明文显示隐藏功能

先看看效果：

显示：

页面：

    <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>
.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操作dom元素：

<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>