模拟淘宝密码登录界面

密码输入

文章目录

密码输入
前言
一、首先使用HTML
二、css引入
- 1.进入界面
- 2.调试
三、最后的js
总结

前言

浅显飞过HTML和css基础，今天搭配js来模拟一下我们日常登入大部分界面要使用的密码隐藏和显示界面

一、首先使用HTML

要想编写一个舒服的网页，HTML的格式布局要合理，让人看起来舒服，才能保证一个网页的美观

代码如下

<div class="box">

    <label for="">
        <img src="./img/闭眼.png" alt="">
    </label>
    <input type="password" name=""  id="pad" >

这里的开眼和闭眼图片如下
在这里插入图片描述

有需要的兄弟可取走

二、css引入

引入css来控制密码框的大小，还有图片的大小的位置，这样会使得整个界面看起来符合大众的习惯

代码如下

<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 img{
            width: 25px;
            position: absolute;
            right: 0px;
            top: 10px;
        }
    </style>

这些像素的大小每个人具体不一样，可以在chrome上面调试，调试步骤如下

1.进入界面

在这里插入图片描述
接下来我们可以点击鼠标右键后点击检查

在这里插入图片描述
或者说直接点击键盘F12跳出界面

接着我们点击

接着选中我们的眼睛图案

2.调试

出现以下界面
在这里插入图片描述
我们可以在这里调试到最适合我们电脑的像素大小，但是要记得在vscode里面修改我们的css代码

三、最后的js

最后我们要使用js让代码可以交互起来，使得页面看起来更具有智能化的感觉，使得用户使用起来方便

代码如下

<script>

    //1.获取元素
    var im=document.querySelector('img');   
    var pad=document.getElementById('pad');

    //2.绑定事件
    var flag=0

    im.onclick=function(){
        if(flag==0){
            pad.type='text';
            im.src="./img/开眼.png";
            flag=1;
        }else{

            pad.type='password';
            im.src="./img/闭眼.png";
            flag=0;
        }
        
    }
</script>

在这里我只用到onclick操作，如果各位感兴趣可以优化代码

运行结果如下

在这里插入图片描述
这是隐藏密码的时候，可以看到此时我们的眼睛是闭着的

接下来我们，点击眼睛看看
在这里插入图片描述
发现眼睛睁开了，并且密码显示出来了，说明我们的web代码编写成功，但是还有很多地方可以优化