利用js点击小眼睛图片实现转换明文暗码的效果

蔚落 2023-07-03 02:37 25阅读 0赞

明文暗码:实际上就是密码框和文本框的切换.  
看到别人输入密码的时候 旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单就完成这个案例了.  
HTML和css代码块

<style> .box{ 
            position: relative;
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
            margin: 100px auto;;
        }
        input{ 
            margin-top: 20px;
            margin-left: 20px;
            width: 200px;
        }
        img{ 
            position:absolute;
            top: 100px;
            left: 262px;
            width: 15px;
            height: 12px;
            opacity: 0.6;
        }
    </style>
    **html 代码**
    <div class="box">
            <p>
                账 号<input type="text" value="">
            </p>
            <p>
                密  码<input type="password" id="pwd">
                <img src="close.jpg" alt="" id = "eye">
            </p>
            <button id="btn1">重置</button>
            <button id="btn2">确定</button>
        </div>

**js模块**

<script>
            var eye = document.getElementById("eye");
            var pwd = document.getElementById("pwd");
       
            //这里要做一个简单的算法,如果是1就变成文本框,如果是0就变成密码框.
            var a = 0;
            eye.onclick =function(){ 
                //点击后改变成文本框,再点击就变回密码框.
                if( a == 0 ){ 
                    pwd.type = "text";
                    eye.src = "open.jpg";
                    a = 1;
                }else{ 
                    pwd.type = "password";
                    eye.src = "close.jpg";
                    a = 0;
                }
            }
    
        </script>

成果图  
小眼睛是两个小图片可以换成自己喜欢的.  
![有点模糊不要介意哈][20200131140719929.gif]

[20200131140719929.gif]: https://img-blog.csdnimg.cn/20200131140719929.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关登录密码，眼睛效果，点击显示，点击隐藏

$(document).ready(function(){ $(".userinfo_main_csrq i").click(func

ゝ一世哀愁。/ 2024年02月17日 23:09/ 0 赞/ 33 阅读

相关利用js点击小眼睛图片实现转换明文暗码的效果

明文暗码:实际上就是密码框和文本框的切换. 看到别人输入密码的时候旁边有个小眼睛,点击后就可以把密码显示出来了,再点击又隐藏了,所以今天自己也简单的做一下.发现还是很简单

蔚落/ 2023年07月03日 02:37/ 0 赞/ 26 阅读

相关纯js实现点击预览图片效果

效果如图所示 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

灰太狼/ 2023年06月20日 10:53/ 0 赞/ 757 阅读

相关 js实现点击隐藏图片

方法一：把图片的display设为none，触发点击事件时，display变为block <style> img { wi

古城微笑少年丶/ 2023年06月05日 08:08/ 0 赞/ 41 阅读

相关敏感数据脱敏点击眼睛后查看明文

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2023年01月21日 04:21/ 0 赞/ 131 阅读

相关 android密码小眼睛,android 实现点击edittext的“小眼睛”切换明密文

很多时候，我们为了用户的隐私安全，需要在密码输入的时候，显示密文。为了更好的用户体验，我们给用户提供了可以切换明密文的小图标(小眼睛) 先来看一下效果图： ![4a65c9

妖狐艹你老母/ 2022年10月05日 13:57/ 0 赞/ 161 阅读

相关 js点击图片放大效果ImageZoom代码下载

原文：[js点击图片放大效果ImageZoom代码下载][js_ImageZoom] 源代码下载地址：[http://www.zuidaima.com/share/17957

╰+攻爆jí腚メ/ 2022年08月22日 15:18/ 0 赞/ 392 阅读

相关 android 实现点击edittext的“小眼睛”切换明密文

[android 实现点击edittext的“小眼睛”切换明密文][android _edittext] [android _edittext]: https://blog

分手后的思念是犯贱/ 2022年02月02日 23:51/ 0 赞/ 274 阅读

相关利用js实现图片的轮播效果

每个三秒钟做一件事: window.setInterval()：按照指定周期（以毫秒计）来调用函数或计算表达式 setInterval("alert('123')",20...

红太狼/ 2020年06月06日 17:01/ 0 赞/ 797 阅读

相关利用js实现图片的轮播效果

利用js实现图片的轮播效果

朱雀/ 2020年05月10日 16:46/ 0 赞/ 1109 阅读