电脑端打卡小程序示例 - 简单易用，立即体验 - 常规

<!DOCTYPE html>
<html>
<head>
  <title>打卡小程序</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }
<pre><code>h1 {
  color: #333;
}

button {
  padding: 10px 20px;
  background-color: #009688;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 16px;
}
</code></pre>
  </style>
</head>
<body>
  <h1>打卡小程序</h1>
  <button id="checkInButton">打卡</button>
  <p id="status"></p>
  <script>
    // 获取打卡按钮和状态信息的 DOM 元素
    var checkInButton = document.getElementById('checkInButton');
    var statusElement = document.getElementById('status');

    // 打卡按钮点击事件处理函数
    checkInButton.addEventListener('click', function() {
      // 模拟打卡请求，这里可以根据实际情况发送请求到后端进行打卡
      setTimeout(function() {
        // 更新状态信息
        statusElement.textContent = '打卡成功！';
      }, 1000); // 这里使用 setTimeout 来模拟请求的延迟
    });
  </script>
</body>
</html>
这是一个简单的静态页面，包含一个打卡按钮和状态信息。当点击打卡按钮时，会触发点击事件处理函数，你可以在这个函数中添加实际的打卡逻辑，比如发送请求到后端进行打卡操作。示例中使用了 setTimeout 来模拟请求的延迟，你可以根据实际情况进行修改。
<p>希望对你有帮助！</p>