HTML+js
<body>
<div class="wrapper">
<input type="text" id="pwd">
<div class="imgs">
<img id="eye" src="./img/eye.png" alt="">
<img id="look" src="./img/lock.png" alt="">
</div>
</div>
<script>
let _imgs = document.querySelectorAll('img');
let _pwd=document.querySelector('#pwd');
_imgs.forEach((_img, index) => {
_img.onclick = function () {
switch (index) {
case 0:
_imgs[0].style.display = 'none';
_imgs[1].style.display = 'block';
_pwd.type='password';
break;
case 1:
_imgs[0].style.display = 'block';
_imgs[1].style.display = 'none';
_pwd.type='text';
break;
}
}
})
</script>
</body>
CSS
<style>
.wrapper {
position: relative;
width: 200px;
height: 30px;
}
input {
width: 200px;
height: 30px;
}
img {
width: 30px;
position: absolute;
top: 3px;
right: 2px;
}
#look {
display: none;
}
</style>
效果图
未加密时
加密后
3482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
