要求有上班打卡和下班打卡两个按钮,点击打卡后自动显示打卡时间
时间: 2024-05-12 18:19:11 浏览: 16
这个需求可以通过以下步骤实现:
1. 首先在页面上添加两个按钮,一个是上班打卡,一个是下班打卡。
2. 在按钮的点击事件中,使用 JavaScript 获取当前时间,并将其显示在页面上。
3. 可以使用 localStorage 或者 cookie 等方式将打卡时间保存下来,以便后续统计。
以下是一个简单的实现示例:
HTML 代码:
```html
<button id="clock-in-btn">上班打卡</button>
<button id="clock-out-btn">下班打卡</button>
<p id="clock-in-time"></p>
<p id="clock-out-time"></p>
```
JavaScript 代码:
```javascript
// 获取打卡按钮和打卡时间显示区域
const clockInBtn = document.getElementById('clock-in-btn');
const clockOutBtn = document.getElementById('clock-out-btn');
const clockInTime = document.getElementById('clock-in-time');
const clockOutTime = document.getElementById('clock-out-time');
// 绑定打卡按钮的点击事件
clockInBtn.addEventListener('click', () => {
// 获取当前时间
const now = new Date();
const timeStr = now.toLocaleString();
// 显示打卡时间
clockInTime.innerHTML = `上班打卡时间:${timeStr}`;
// 保存打卡时间
localStorage.setItem('clockInTime', timeStr);
});
clockOutBtn.addEventListener('click', () => {
// 获取当前时间
const now = new Date();
const timeStr = now.toLocaleString();
// 显示打卡时间
clockOutTime.innerHTML = `下班打卡时间:${timeStr}`;
// 保存打卡时间
localStorage.setItem('clockOutTime', timeStr);
});
```
这样,用户点击上班或下班打卡按钮后,页面上就会显示对应的打卡时间。同时,打卡时间也会被保存在 localStorage 中,以便后续统计。