运用DOM制作登录界面密码显示与隐藏

要求

登陆界面点击按钮将密码框切换为文本框，并可以查看密码明文。

核心思路

点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码

一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框

算法

利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1

css代码

 .box {position: relative;width: 400px;border: 1px solid #ccc;margin: 100px auto;padding: 20px;}.box input {width: 370px;height: 30px;border: 0;outline: none;border-bottom: 1px solid #ccc;/* color: #ccc; */}.box img {position: absolute;top: 40px;right: 2px;width: 24px;}

html

 
用户名：
密码：

js

 //点击input内部的value值变为空var Name = document.getElementById('username');var pwd = document.getElementById('pwd');Name.onclick = function () {Name.value = ("");}pwd.onclick = function () {pwd.value = ("");}// 1. 获取元素var eye = document.getElementById('eye');// 2. 注册事件 处理程序var flag = 0;eye.onclick = function () {// 点击一次之后， flag 一定要变化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 赋值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}

图片素材

到这里就结束啦！！！完结撒花*★,°*:.☆(￣▽￣)/$:*.°★* 。

如有错误欢迎大家来找茬！！！！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！