web前端项目

做了一个简单的登陆注册页面，适用于一些页面的登录注册。

登录注册功能的切换实现了平滑的效果，主要代码如下： 

script代码： 

// 获取登录按钮和注册按钮的元素
const signInBtn = document.getElementById("signIn");
const signUpBtn = document.getElementById("signUp");

// 获取登录表单和注册表单的元素
const fistForm = document.getElementById("form1");
const secondForm = document.getElementById("form2");

// 获取容器元素
const container = document.querySelector(".container");

// 点击登录按钮时，移除容器的类名，显示登录表单
signInBtn.addEventListener("click", () => {
  container.classList.remove("right-panel-active");
});

// 点击注册按钮时，添加容器的类名，显示注册表单
signUpBtn.addEventListener("click", () => {
  container.classList.add("right-panel-active");
});

// 阻止登录表单和注册表单的默认提交行为
fistForm.addEventListener("submit", (e) => e.preventDefault());
secondForm.addEventListener("submit", (e) => e.preventDefault());

// 获取登录表单中的登录按钮
const loginBtn = document.querySelector("#form2 .btn");

// 点击登录按钮时，阻止默认提交行为，并获取手机号码和密码输入框的值，并打印到控制台上
loginBtn.addEventListener("click", (e) => {
  e.preventDefault();

  const telInput = document.querySelector("#form2 input[type='tel']");
  const passwordInput = document.querySelector("#form2 input[type='password']");

  const tel = telInput.value;
  const password = passwordInput.value;

  console.log("tel:", tel);
  console.log("Password:", password);
});

这段代码主要是一个登录注册页面的交互逻辑。首先，通过`getElementById`和`querySelector`方法获取到页面上的一些元素，如登录按钮、注册按钮、两个表单和容器。

然后，通过`addEventListener`方法给登录按钮和注册按钮分别添加了点击事件监听器。当点击登录按钮时，会从容器的类名中移除`right-panel-active`，以显示登录表单。当点击注册按钮时，会向容器的类名中添加`right-panel-active`，以显示注册表单。

接下来，通过`addEventListener`方法给两个表单添加了提交事件监听器，并使用`preventDefault`方法阻止表单的默认提交行为，以便后续自定义处理。

最后，通过`querySelector`方法获取到登录表单中的登录按钮，并给它添加了点击事件监听器。在点击登录按钮时，同样使用`preventDefault`方法阻止默认提交行为，并获取到登录表单中的手机号码输入框和密码输入框的值，并打印到控制台上。

这段代码主要实现了登录注册页面的切换和登录表单的提交逻辑，以及获取表单中的输入值并进行处理的功能。