h5页面打卡功能代码

为了实现h5页面的打卡功能，需要使用HTML、CSS和JavaScript来编写代码。

首先，在HTML中创建一个打卡按钮，并为其添加一个点击事件，以触发打卡功能。可以使用button标签来创建按钮，如下所示：

<button id="clockInButton" onclick="clockIn()">打卡</button>

接下来，在JavaScript中定义一个打卡函数，该函数将在按钮点击时执行。在函数中，可以获取当前时间，并将其保存到一个变量中。可以使用`new Date()`来获取当前时间，再使用`toLocaleString()`方法将其转换为字符串格式。

function clockIn() {
  var currentTime = new Date().toLocaleString();
  // 将当前时间保存到变量currentTime中
  // 其他打卡功能代码...
}

如果需要将打卡记录保存到服务器或本地存储中，可以使用JavaScript中的相关方法，如`XMLHttpRequest`或`localStorage`。

function clockIn() {
  var currentTime = new Date().toLocaleString();
  // 其他打卡功能代码...
  
  // 将打卡记录发送到服务器
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://example.com/clock-in', true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('打卡成功！');
    }
  };
  xhr.send(JSON.stringify({ time: currentTime }));

  // 或者将打卡记录保存到本地存储
  localStorage.setItem('clockInTime', currentTime);
}

最后，可以使用CSS来美化打卡按钮的样式，如背景颜色、边框样式、字体颜色等。

#clockInButton {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
}

通过编写以上代码，就可以实现h5页面的打卡功能了。当用户点击打卡按钮时，会获取当前时间并将其保存到服务器或本地存储中，从而完成打卡操作。