Web前端 html+js+css 一个简单的在线签到

最新推荐文章于 2024-06-27 05:42:25 发布

一只安静的呱

最新推荐文章于 2024-06-27 05:42:25 发布

阅读量843

点赞数

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/m0_72713073/article/details/132056710

版权

页面长这样-

以下是代码部分：

<!DOCTYPE html>
<html>
  <head>
    <title>签到页面</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        margin: 0;
        padding: 20px;
      }
      
      .container {
        max-width: 600px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      
      h1 {
        text-align: center;
        color: #333;
      }
      
      .form-container {
        margin-bottom: 20px;
      }
      
      .form-container label {
        display: block;
        margin-bottom: 10px;
        font-weight: 600;
      }
      
      .form-container input[type="text"],
      .form-container button {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }
      
      .form-container button[type="submit"] {
        margin-top: 10px;
        background-color: #4caf50;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      
      .form-container button[type="submit"]:hover {
        background-color: #45a049;
      }
      
      .signed-users {
        border-top: 1px solid #ccc;
        padding-top: 20px;
      }
      
      .signed-users h2 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #333;
      }
      
      .signed-users ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      
      .signed-users li {
        margin-bottom: 5px;
      }
      
      .signed-users li span {
        color: #555;
      }
      
      .success-message {
        color: green;
        text-align: center;
        margin-top: 10px;
      }
      
      .error-message {
        color: red;
        text-align: center;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>签到</h1>
      
      <div class="form-container">
        <form id="sign-in-form">
          <label for="name">姓名：</label>
          <input type="text" id="name" name="name" placeholder="请输入姓名">
          
          <label for="email">邮箱：</label>
          <input type="text" id="email" name="email" placeholder="请输入邮箱">
          
          <button type="submit">签到</button>
        </form>
      </div>
      
      <div class="signed-users">
        <h2>已签到用户：</h2>
        <ul id="user-list"></ul>
      </div>
      
      <div id="success-message" class="success-message"></div>
      <div id="error-message" class="error-message"></div>
    </div>
    
    <script>
      // 获取表单元素和用户列表元素
      const form = document.getElementById('sign-in-form');
      const userList = document.getElementById('user-list');
      const successMessage = document.getElementById('success-message');
      const errorMessage = document.getElementById('error-message');
      const signedUsers = []; // 已签到用户数组
      
      // 监听表单提交事件
      form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取姓名和邮箱输入框的值
        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        
        if (name && email) {
          if (signedUsers.includes(email)) {
            errorMessage.textContent = '该邮箱已签到过！';
            successMessage.textContent = '';
          } else {
            // 创建新的列表项
            const listItem = document.createElement('li');
            listItem.innerHTML = `<strong>${name}</strong> - <span>${email}</span>`;
            
            // 将列表项添加到用户列表中
            userList.appendChild(listItem);
            
            // 添加邮箱到已签到用户数组中
            signedUsers.push(email);
            
            // 清空输入框的值
            document.getElementById('name').value = '';
            document.getElementById('email').value = '';
            successMessage.textContent = '签到成功！';
            errorMessage.textContent = '';
          }
        } else {
          errorMessage.textContent = '请填写姓名和邮箱！';
          successMessage.textContent = '';
        }
      });
    </script>
  </body>
</html>