2024.4.28（结组第8天）

代码量：87行

博客园：1

今天通过网上学习css方面的知识对登录和注册做了一个动态切换的效果，并且将之和正式网站很相似，在登录页面有着记住密码、忘记密码、切换到注册页面的功能；在注册界面有着确认密码、确认协议和切换到登录界面的功能。

 

 登录注册可以是被视为两个盒子，他们是通过只显示盒子范围内的试图，然后通过所需元素的位置达到动态切换的效果。

其对应的JavaScript和css代码都在前几篇博客园内进行了更新

而此页面所对应的html代码为：

<%@ page import="java.util.Random" %>
<%@ page import="jdk.internal.access.JavaIOFileDescriptorAccess" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
  <meta name="renderer" content="webkit" />
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
</head>
<body>

<script>
  function changePage(pagename){
    var xhr = new XMLHttpRequest();  // 创建XMLHttpRequest对象
    xhr.open("GET", "hello-servlet1", true);  // 设置HTTP请求方式和Servlet的URL
    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
          var response = xhr.responseText;  // 获取Servlet的响应数据
          var sessionValues = response.sessionValue; // 获取Session值

          console.log("Session 中的值为: " + sessionValues);
        } else {
          // 请求失败
          console.error('请求失败：' + xhr.status);
        }
      }
    };
    xhr.send();  // 发送HTTP请求到Servlet
    var i,page;
    page=document.getElementsByClassName("page");
    for(i=0;i<page.length;i++){
      page[i].style.display="none";
    }
    wrapper.style.display="none";
    document.getElementById("wrapp").style.display="block";
    document.getElementById(pagename).style.display="block";
  }
</script>

<header>
  <h2 class="logo">青藏铁路</h2>
  <div class="navigation">
    <a href="#" onclick="changePage('home')">首页</a>
    <a href="#" onclick="changePage('h1')">网络安全</a>
    <a href="#" onclick="changePage('h2')">人文科技</a>
    <a href="#" onclick="changePage('h3')">心理健康</a>
    <button onclick="wr()" id="loginregister-button" class="btnLogin-popup">登录</button>
  </div>
</header>

<div id="wrapper" class="wrapper">
  <span class="icon-close"><ion-icon name="close"></ion-icon></span>
  <div class="form-box login">
    <h2>
      登录
    </h2>
    <form action="#" id="loginbox">
      <div class="input-box">
        <span class="icon"><ion-icon name="call"></ion-icon></span>
        <input type="text" id="loginphone" pattern="[0-9]{11}" title="请输入正确的手机号！" required>
        <label>手机号</label>
      </div>
      <div class="input-box">
        <span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
        <input type="password" id="loginpass" required>
        <label>密码</label>
      </div>
      <div class="remember-forgot">
        <label><input id="rememberme" type="checkbox">记住我</label>
        <a href="#">忘记密码?</a>
      </div>
      <button type="submit" id="loginsubmit" class="btn">登录</button>
      <div class="login-register">
        <p>拥有一个新的账号? <a href="#" class="register-link">注册</a> </p>
      </div>
    </form>
  </div>

</div>

<div id="wrapp" class="wrapp" style="display: none">
  <div id="home"  class="page" style="display: none">
    <div  style="color: #fdfcfc;font-size: 40px">欢迎来到青藏铁路孩童心理健康教育测试平台</div>
  </div>
</div>
<script src="script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</body>
</html>

 

posted @ 2024-04-28 22:08  贾贾鱼  阅读(8)  评论(0)    收藏  举报