登录页面

一、用到的图片

二、编写页面的代码

<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2022/7/7
  Time: 20:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        #box{
            border: 1px solid #aeaeae;
            margin: 100px auto;
            width: 800px;
            border-radius: 20px;
        }
        #pbox{
            margin: 20px auto;
            width: 500px;
            height: 35px;
            border-bottom: 1px solid #aeaeae ;

        }
        #pbox input{
            width: 450px;
            height: 35px;
            border:none ;
            outline: none;
        }
        #pbox img{
            position: absolute;
            top: 158px;
            right: 520px;
            width: 28px;
        }
        #ubox{
            margin: 20px auto;
            width: 500px;
            height: 35px;
            border-bottom: 1px solid #aeaeae ;
        }
        #ubox input{
            width: 450px;
            height: 35px;
            border:none ;
            outline: none;
        }
        #box p{
            text-align: center;
        }
        #login{
            width: 500px;
            height: 35px;
            border: none;
            margin: 20px  150px;
            background-color: lightsalmon;
            border-radius: 20px;
        }
        #p{
            /*border: 1px solid red;*/
            width: 220px;
            margin: 20px 150px;
            font-size: 2px;

        }


    </style>



</head>
<body>
<%--仿淘宝登录，用js完成--%>
<%--outline: none;外轮廓--%>
<%--思路：当点击锁的图片时，密码框变成文本框，锁着的图片变成开锁的图片
点击一个按钮实现两种效果，一种是文本框，一种是密码框
详解：设置一个flag变量，当flag等于0时为文本框，当flag为1时，是密码框--%>
<div id="box">
    <p>登录</p>
    <div id="ubox">
        <input type="text" placeholder="请输入用户名/手机号/邮箱"/>
    </div>

    <div id="pbox">
        <label>
            <img src="images/锁着.jpg" id="img"/>
        </label>
        <input type="password" id="psw" placeholder="请输入密码"/>
    </div>

        <button id="login">登录</button>
    <div id="p"  >
        <p>短信验证码登录 &nbsp;  手机快速注册</p>


    </div>


</div>

<script >
    var psw=document.getElementById('psw');
    var img=document.getElementById('img');
    var flag=0;
    img.onclick=function () {
        if(flag==0){
            psw.type='text';
            img.src='images/开了.jpg';
            flag=1;
        }else{
            psw.type='password';
            img.src='images/锁着.jpg';
            flag=0;
        }
    }
</script>
</body>
</html>

 

posted @ 2022-07-11 20:19  晓葡萄在路上  阅读(189)  评论(0)    收藏  举报