手机端网页的登陆界面 js

以下是一个简单的手机端网页登陆界面的 JavaScript 实现：

// 获取页面元素
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('login-button');

// 绑定点击事件
loginButton.addEventListener('click', function() {
  // 获取输入的用户名和密码
  const username = usernameInput.value;
  const password = passwordInput.value;

  // TODO: 进行表单验证

  // 发送登录请求
  fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({
      username: username,
      password: password
    }),
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => response.json())
  .then(data => {
    // 登录成功
    if (data.success) {
      // 跳转到首页
      window.location.href = '/home';
    }
    // 登录失败
    else {
      // 显示错误信息
      const errorLabel = document.getElementById('error-label');
      errorLabel.textContent = data.message;
    }
  })
  .catch(error => {
    console.error(error);
  });
});

这段代码做了以下几件事情：

1. 获取页面中的用户名输入框、密码输入框和登录按钮；
2. 绑定登录按钮的点击事件，当点击时获取输入的用户名和密码，并发送登录请求；
3. 在登录请求的回调函数中，根据服务器返回的响应进行处理，如果登录成功则跳转到首页，如果登录失败则显示错误信息。