本文共 3889 字，大约阅读时间需要 12 分钟。

显示密码

效果

核心思路

在点击图标时密码框显示隐藏密码，因此需要获取的事件源为图标和密码框；事件类型为点击眼睛图标onclick；点击后if语句判断密码表单的类型，如果是类型type为password则转变为文本text，图标变为睁眼；如果是类型type为text则转变为文本password，图标变为闭眼。

HTML与CSS布局

   
    
    
京东登录
    
    
        
     
        
     
忘记密码
    
    
    
    登录    
    
        账号密码登录        手机快速注册    
    
    
        
     
其他登录方式
        
     
QQ
    
    
    
    
登录即代表您已同意京东隐私政策
   

.w {
               width: 100%;            height: 500px;            padding: 0 25px;            margin: 20px auto;        }        /* 头部 */                .w h3 {
               position: relative;            width: 100%;            height: 44px;            line-height: 44px;            font-size: 20px;            text-align: center;        }                .w h3::before {
               content: "";            position: absolute;            left: 0;            top: 5px;            display: inline-block;            width: 34px;            height: 34px;            background-image: url(image/箭头.png);            background-size: 34px;        }        /* 文本框与密码框 */                .w .on p {
               position: relative;            margin: 20px 0 0;            padding: 10px 0;            width: 100%;            border-bottom: 1px solid #ccc;        }                .w .on p input {
               width: 80%;            height: 50px;        }                /*文本框的宽度设为100%，不然后面会有部分空白*/        .w .on p .text {
               width: 100%;        }                .w .on p span img {
               position: absolute;            top: 24px;            right: 130px;            width: 24px;        }                .w .on p .forget {
               position: absolute;            top: 28px;            right: 0px;            width: 100px;            text-align: center;            padding-left: 10px;            border-left: 1px solid #ccc;            font-size: 13px;        }        /* 登录按钮 */                .w button {
               width: 100%;            height: 50px;            margin: 22.5px 0 0;            border-radius: 25px;            font-size: 18px;            color: #fff;            background-color: rgb(252, 104, 104);            letter-spacing: 10px;        }        /* 账号密码登录注册 */                .w .chose {
               width: 100%;            height: 19px;            line-height: 19px;            margin: 20px 0 0;        }                .w .chose a {
               color: #777;            font-size: 14px;        }                .w .chose .chose-left {
               float: left;        }                .w .chose .chose-right {
               float: right;        }        /* 其他登陆方式 */                .login {
               width: 100%;            height: 99px;            margin: 88px 0 0;            border-top: 1px solid #ccc;            text-align: center;        }                .login h4 {
               width: 140px;            font-size: 14px;            text-align: center;            color: #ccc;            margin: -11px 50% 0;            transform: translateX(-50%);            background-color: #fff;        }                .login .login-style {
               display: block;            width: 100%;            height: 70px;            margin: 25px 0 12px;        }                .login .login-style a {
               display: inline-block;            width: 36px;            color: rgba(0, 0, 0, .4);            font-size: 12px;            margin: 11.25px;            background-size: 100% auto;            padding-top: 44.25px;            background-repeat: no-repeat;            background-image: url(image/QQ.png);        }        /* 隐私政策 */                .read {
               text-align: center;            font-size: 9.75px;            color: rgba(0, 0, 0, .3);            margin-top: 11.25px;        }                .read a {
               color: skyblue;        }    

JavaScript部分

转载地址：https://blog.csdn.net/zx2014567296/article/details/117790416 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！