可以给我写一个网页版的打卡工具吗?十个员工打卡的详情记录
时间: 2023-12-03 19:44:01 浏览: 34
当然可以!下面是一个简单的网页版打卡工具,可以记录十个员工的打卡详情记录:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>打卡工具</title>
</head>
<body>
<h1>打卡记录</h1>
<form>
<label for="name1">员工1姓名:</label>
<input type="text" id="name1" name="name1"><br>
<label for="time1">员工1打卡时间:</label>
<input type="time" id="time1" name="time1"><br>
<label for="name2">员工2姓名:</label>
<input type="text" id="name2" name="name2"><br>
<label for="time2">员工2打卡时间:</label>
<input type="time" id="time2" name="time2"><br>
<label for="name3">员工3姓名:</label>
<input type="text" id="name3" name="name3"><br>
<label for="time3">员工3打卡时间:</label>
<input type="time" id="time3" name="time3"><br>
<label for="name4">员工4姓名:</label>
<input type="text" id="name4" name="name4"><br>
<label for="time4">员工4打卡时间:</label>
<input type="time" id="time4" name="time4"><br>
<label for="name5">员工5姓名:</label>
<input type="text" id="name5" name="name5"><br>
<label for="time5">员工5打卡时间:</label>
<input type="time" id="time5" name="time5"><br>
<label for="name6">员工6姓名:</label>
<input type="text" id="name6" name="name6"><br>
<label for="time6">员工6打卡时间:</label>
<input type="time" id="time6" name="time6"><br>
<label for="name7">员工7姓名:</label>
<input type="text" id="name7" name="name7"><br>
<label for="time7">员工7打卡时间:</label>
<input type="time" id="time7" name="time7"><br>
<label for="name8">员工8姓名:</label>
<input type="text" id="name8" name="name8"><br>
<label for="time8">员工8打卡时间:</label>
<input type="time" id="time8" name="time8"><br>
<label for="name9">员工9姓名:</label>
<input type="text" id="name9" name="name9"><br>
<label for="time9">员工9打卡时间:</label>
<input type="time" id="time9" name="time9"><br>
<label for="name10">员工10姓名:</label>
<input type="text" id="name10" name="name10"><br>
<label for="time10">员工10打卡时间:</label>
<input type="time" id="time10" name="time10"><br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<h2>打卡详情记录</h2>
<div id="record"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript:
```
function submitForm() {
// 获取员工姓名和打卡时间
const name1 = document.getElementById("name1").value;
const time1 = document.getElementById("time1").value;
const name2 = document.getElementById("name2").value;
const time2 = document.getElementById("time2").value;
const name3 = document.getElementById("name3").value;
const time3 = document.getElementById("time3").value;
const name4 = document.getElementById("name4").value;
const time4 = document.getElementById("time4").value;
const name5 = document.getElementById("name5").value;
const time5 = document.getElementById("time5").value;
const name6 = document.getElementById("name6").value;
const time6 = document.getElementById("time6").value;
const name7 = document.getElementById("name7").value;
const time7 = document.getElementById("time7").value;
const name8 = document.getElementById("name8").value;
const time8 = document.getElementById("time8").value;
const name9 = document.getElementById("name9").value;
const time9 = document.getElementById("time9").value;
const name10 = document.getElementById("name10").value;
const time10 = document.getElementById("time10").value;
// 将打卡记录添加到页面中
const record = document.getElementById("record");
record.innerHTML = `
<p>${name1} 打卡时间:${time1}</p>
<p>${name2} 打卡时间:${time2}</p>
<p>${name3} 打卡时间:${time3}</p>
<p>${name4} 打卡时间:${time4}</p>
<p>${name5} 打卡时间:${time5}</p>
<p>${name6} 打卡时间:${time6}</p>
<p>${name7} 打卡时间:${time7}</p>
<p>${name8} 打卡时间:${time8}</p>
<p>${name9} 打卡时间:${time9}</p>
<p>${name10} 打卡时间:${time10}</p>
`;
}
```
这只是一个简单的示例,可以根据实际需求进行修改和扩展。