收款定制开发解锁前端密码框常见功能做法

📋 个人简介

  • 💖 作者简介:大家好,我是阿牛,收款定制开发全栈领域新星创作者。😜
  • 📝 个人主页:🔥
  • 🎉 支持我:点赞👍+收藏⭐️+留言📝
  • 📣 系列专栏:🍁
  • 💬格言:收款定制开发迄今所有人生都大写着失败,收款定制开发但不妨碍我继续向前!🔥

前些天发现了一个比较好的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。

点击跳转到网站:

上期传送门:
👉
👉
👉
👉
👉
👉
👉
👉


目录

前言

学前端最基本的登录页面肯定要会写,那登录页面里面的密码框的功能设计就需要好好打磨,主要功能有显示密码明文,密码检测信息提示等等,那么本篇博客将写写这些功能结合js怎么做,很简单,看一下就会了。

显示隐藏密码明文

1.用到的图片素材

2.代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box{            position: relative;            width: 400px;            border-bottom: 1px solid #ccc;            margin: 100px auto;        }        .box input{            width: 370px;            height: 30px;            border: 0;            outline: none;        }        .box .image{            position: absolute;            top:2px;            right: 2px;            border: 1px solid #ccc;            background-color: #ccccccba;            border-radius: 50%;            overflow: hidden;        }        .box img{            vertical-align: bottom;   /*父盒子是由img撑开的,所以要去除下面的间隙*/            width: 22px;        }    </style></head><body>    <div class="box">        <div class="image">            <img src="close.png" alt="" id="img">        </div>        <input type="password"  id="pwd">    </div>    <script>        var img = document.getElementById('img');        var pwd = document.getElementById('pwd');        var flag = 0;        img.onclick = function(){            if(flag == 0){                pwd.type = 'text';                this.src='open.png';   // this指向事件函数的调用者,即img                flag = 1;            }else{                pwd.type = 'password';                this.src='close.png';                flag = 0;            }        }    </script>    </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

3.结果演示

密码框验证信息

1.用到的图片素材

2.代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .register{            width: 600px;            margin: 100px auto;        }        .ipt{            width: 250px;            border: 1px solid #999;            outline: none;        }        .message{            display: inline-block;            height: 20px;            font-size: 12px;            color: #999;            background: url(mess.png) no-repeat left center;            padding-left: 30px;        }        .wrong{            color: red;            background: url(wrong.png) no-repeat left center;        }        .right{            color: green;            background: url(right.png) no-repeat left center;        }    </style></head><body>    <div class="register">        <input type="password" class="ipt">        <p class="message">请输入6~16位密码</p>    </div>    <script>        var ipt = document.querySelector('.ipt');        var msg = document.querySelector('.message');        ipt.onfocus = function(){            this.style.borderColor = 'skyblue'        }        ipt.onblur = function(){            this.style.borderColor = '#999';            if(this.value.length<6 || this.value.length>16){                msg.className = 'message wrong';                msg.innerHTML = '你输入的位数不符合要求6~16位!';            }else{                msg.className = 'message right';                msg.innerHTML = '你输入的正确!';            }        }    </script>    </body></html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

3.结果演示

结语

持续关注本专栏,带来更多基础和有用的小demo~~~,一起冲冲冲🔥🔥🔥

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发