zoukankan      html  css  js  c++  java
  • 【js效果】密码的显示和隐藏

    效果图:

    素材:
    close.png

    open.png

    源码:

    <!doctype html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>无标题文档</title>
        <style>
            .box {
                position: relative;
                 400px;
                border: 1px solid #E3E3E3;
                margin: 100px auto;
                padding: 2px;
            }
    
            .box input {
                 370px;
                height: 30px;
                border: 0;
               outline:none;
            }
    
            .box img {
                position: absolute;
                top: 4px;
                right: 6px;
                 24px;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <label for="">
                <img src="images/close.png" alt="" id="eye">
            </label>
            <input type="password" name="" id="pwd">
        </div>
        <script>
            var eye = document.getElementById('eye');
            var pwd = document.getElementById('pwd');
            var flag = 0;
            eye.onclick = function () {
                if (flag == 0) {
                    pwd.type = 'text';
                    eye.src = 'images/open.png';
                    flag = 1;
                } else {
                    pwd.type = 'password';
                    eye.src = 'images/close.png';
                    flag = 0;
                }
            };
        </script>
    </body>
    
    </html>
    
  • 相关阅读:
    java笔记
    java面向对象
    Oracle数据库基础
    Java中的集合和常用类
    Java面向对象的三个特征
    Java中的类与对象
    Java中的冒泡排序
    JAVA中的一些内置方法
    JAVA中的数据类型
    SSH整合
  • 原文地址:https://www.cnblogs.com/hellocd/p/14255005.html
Copyright © 2011-2022 走看看