html怎么实现密码隐藏显示

<script type="text/javascript">

// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制

var visible=document.getElementById('psw_visible');//text block

var invisible=document.getElementById('psw_invisible');//password block

var inputVisible = document.getElementById('input_visible');

var inputInVisible = document.getElementById('input_invisible');

    //隐藏text block，显示password block

function showPsw(){

var val = inputInVisible.value;//将password的值传给text

inputVisible.value = val;

invisible.style.display = "none"; 

visible.style.display = ""; 

}

    //隐藏password，显示text 

    function hidePsw(){

   var val=inputVisible.value;//将text的值传给password 

inputInVisible.value = val;

invisible.style.display = ""; 

    visible.style.display = "none"; 

}

</script>

<div id="page_container">

<!--密码输入框-->

<div class="input_block">

<img id="demo_img" οnclick="hideShowPsw()" src="visible.png">

<input type="password" id="demo_input" placeholder="Password"/>

</div>

<button οnclick="">Login</button>

</div>

<script type="text/javascript">

// 这里使用最原始的js语法实现，可对应换成jquery语法进行逻辑控制

var demoImg = document.getElementById("demo_img");

var demoInput = document.getElementById("demo_input");

    //隐藏text block，显示password block

function hideShowPsw(){

if (demoInput.type == "password") {

demoInput.type = "text";

demo_img.src = "invisible.png";

}else {

demoInput.type = "password";

demo_img.src = "visible.png";

}

}

</script>