<!DOCTYPE
html>
<
html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>企业员工打卡系统</title>
<!
-- 引入Element Plus样式
-->
<link rel="stylesheet" href="https
://unpkg.com/element
-plus/dist/index.
css">
<style>
* {
margin
: 0;
padding
: 0;
box
-sizing
: border
-box;
font
-family
: &#
39;Helvetica Neue&#
39;, Helvetica, &#
39;PingFang SC&#
39;, &#
39;Hiragino Sans GB&#
39;, Arial, sans
-serif;
}
body {
background
-color
: #f
5f7fa;
color
: #
333;
line
-height
: 1.6;
padding
: 20px;
}
.container {
max
-width
: 1000px;
margin
: 0 auto;
padding
: 20px;
}
header {
text
-align
: center;
margin
-bottom
: 30px;
padding
: 20px 0;
border
-bottom
: 1px solid #ebeef
5;
}
h1 {
color
: #409eff;
font
-size
: 28px;
margin
-bottom
: 10px;
}
.dashboard {
display
: flex;
gap
: 20px;
margin
-bottom
: 30px;
}
.clock
-card {
flex
: 1;
background
: #fff;
border
-radius
: 8px;
box
-shadow
: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding
: 2
5px;
transition
: all 0.
3s;
}
.clock
-card
:hover {
transform
: translateY(
-5px);
box
-shadow
: 0 6px 16px 0 rgba(0, 0, 0, 0.1
5);
}
.card
-title {
font
-size
: 18px;
font
-weight
: 600;
margin
-bottom
: 20px;
color
: #606266;
display
: flex;
align
-items
: center;
}
.card
-title i {
margin
-right
: 8px;
font
-size
: 20px;
color
: #409eff;
}
.input
-group {
margin
-bottom
: 20px;
}
.el
-input {
position
: relative;
font
-size
: 14px;
display
: inline-block;
width
: 100%;
}
.el
-input__inner {
-webkit
-appearance
: none;
background
-color
: #fff;
background
-image
: none;
border
-radius
: 4px;
border
: 1px solid #dcdfe6;
color
: #606266;
display
: inline-block;
font
-size
: inherit;
height
: 40px;
line
-height
: 40px;
outline
: none;
padding
: 0 1
5px;
transition
: border
-color 0.2s cubic
-bezier(0.64
5, 0.04
5, 0.
355, 1);
width
: 100%;
}
.el
-input__inner
:focus {
border
-color
: #409eff;
}
.button
-group {
display
: flex;
gap
: 12px;
}
.el
-button {
display
: inline-flex;
justify
-content
: center;
align
-items
: center;
line
-height
: 1;
height
: 40px;
white
-space
: nowrap;
cursor
: pointer;
background
: #fff;
border
: 1px solid #dcdfe6;
color
: #606266;
-webkit
-appearance
: none;
text
-align
: center;
box
-sizing
: border
-box;
outline
: none;
margin
: 0;
transition
: .1s;
font
-weight
: 500;
padding
: 12px 20px;
font
-size
: 14px;
border
-radius
: 4px;
flex
: 1;
}
.el
-button
--primary {
color
: #fff;
background
-color
: #409eff;
border
-color
: #409eff;
}
.el
-button
--primary
:hover {
background
: #66b1ff;
border
-color
: #66b1ff;
}
.el
-button
--success {
color
: #fff;
background
-color
: #67c2
3a;
border
-color
: #67c2
3a;
}
.el
-button
--success
:hover {
background
: #8
5ce61;
border
-color
: #8
5ce61;
}
.records
-card {
background
: #fff;
border
-radius
: 8px;
box
-shadow
: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
padding
: 2
5px;
}
table {
width
: 100%;
border
-collapse
: collapse;
margin
-top
: 20px;
}
th {
background
-color
: #fafafa;
color
: #909
399;
font
-weight
: 600;
text
-align
: left;
padding
: 12px 1
5px;
border
-bottom
: 1px solid #ebeef
5;
}
td {
padding
: 12px 1
5px;
border
-bottom
: 1px solid #ebeef
5;
color
: #606266;
}
tr
:hover td {
background
-color
: #f
5f7fa;
}
.el
-tag {
display
: inline-block;
height
: 32px;
line
-height
: 30px;
font
-size
: 12px;
border
-radius
: 4px;
box
-sizing
: border
-box;
white
-space
: nowrap;
padding
: 0 10px;
}
.el
-tag
--primary {
color
: #409eff;
background
-color
: #ecf
5ff;
border
-color
: #d9ecff;
}
.el
-tag
--success {
color
: #67c2
3a;
background
-color
: #f0f9eb;
border
-color
: #e1f
3d8;
}
.status
-indicator {
display
: inline-block;
width
: 10px;
height
: 10px;
border
-radius
: 50%;
margin
-right
: 8px;
}
.status
-in {
background
-color
: #409eff;
}
.status
-out {
background
-color
: #67c2
3a;
}
.empty
-message {
text
-align
: center;
padding
: 40px 0;
color
: #909
399;
}
.empty
-message i {
font
-size
: 60px;
color
: #c0c4cc;
margin
-bottom
: 20px;
display
: block;
}
.clock
-time {
font
-size
: 36px;
font
-weight
: bold;
text
-align
: center;
color
: #409eff;
margin
: 1
5px 0;
font
-family
: &#
39;Courier New&#
39;, monospace;
}
.date
-display {
text
-align
: center;
color
: #909
399;
margin
-bottom
: 20px;
}
.name
-display {
margin
: 20px 0 10px;
font
-size
: 2.2rem;
font
-weight
: 600;
letter
-spacing
: 2px;
font
-family
: &#
39;Helvetica Neue&#
39;, Arial, sans
-serif;
}
.first
-name {
color
: #
30
31
33;
position
: relative;
}
footer {
text
-align
: center;
margin
-top
: 40px;
color
: #909
399;
font
-size
: 14px;
}
@media (max
-width
: 768px) {
.dashboard {
flex
-direction
: column;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>企业员工打卡系统</h1>
<div class="date
-display" id="currentDate"></div>
<div class="clock
-time" id="currentTime"></div>
</header>
<div class="dashboard">
<div class="clock
-card">
<div class="card
-title">
<span>员工打卡</span>
</div>
<div class="input
-group">
<div class="el
-input">
<input type="text" class="el
-input__inner" id="employeeName" placeholder="请输入您的姓名">
</div>
</div>
<!
-- <div class="name
-display">
-->
<!
-- <span id="employeeName" class="first
-name"></span>
-->
<!
-- </div>
-->
<div class="button
-group">
<button class="el
-button el
-button
--primary" id="clockInBtn">上班打卡</button>
<button class="el
-button el
-button
--success" id="clockOutBtn">下班签退</button>
</div>
</div>
<div class="clock
-card">
<div class="card
-title">
<span>今日打卡状态</span>
</div>
<div id="todayStatus" class="empty
-message">
<div>暂无今日打卡
记录</div>
</div>
</div>
</div>
<div class="records
-card">
<div class="card
-title">
<span>打卡
记录</span>
</div>
<div id="recordsTable">
<table>
<thead>
<tr>
<th>员工姓名</th>
<th>打卡时间</th>
<th>打卡类型</th>
</tr>
</thead>
<tbody id="recordsBody">
<!
-- 记录将通过JS动态添加
-->
</tbody>
</table>
<div id="emptyMessage" class="empty
-message">
<div>暂无打卡
记录</div>
</div>
</div>
</div>
<footer>
<p>企业员工打卡系统 © 202
3</p>
</footer>
</div>
<script>
// 模拟API请求的URL
const API_BASE_URL = &#
39;http
://localhost
:8080/api/clock&#
39;;
// DOM元素
const employeeNameInput = document.getElementById(&#
39;employeeName&#
39;);
const clockInBtn = document.getElementById(&#
39;clockInBtn&#
39;);
const clockOutBtn = document.getElementById(&#
39;clockOutBtn&#
39;);
const recordsBody = document.getElementById(&#
39;recordsBody&#
39;);
const emptyMessage = document.getElementById(&#
39;emptyMessage&#
39;);
const todayStatus = document.getElementById(&#
39;todayStatus&#
39;);
const currentDate = document.getElementById(&#
39;currentDate&#
39;);
const currentTime = document.getElementById(&#
39;currentTime&#
39;);
// 初始化函数
function init() {
// 设置当前日期和时间
updateDateTime();
setInterval(updateDateTime, 1000);
// 绑定按钮事件
clockInBtn.addEventListener(&#
39;click&#
39;, () => clock(&#
39;IN&#
39;));
clockOutBtn.addEventListener(&#
39;click&#
39;, () => clock(&#
39;OUT&#
39;));
// 获取url地址参数
const dqurl = new URL(window.location.href);
const dqparams = new URLSearchParams(dqurl.search);
const dquserName = dqparams.get(&#
39;userName&#
39;);
document.getElementById(&#
39;employeeName&#
39;).textContent = dquserName;
// 加载打卡
记录
loadRecords();
}
// 更新日期和时间
function updateDateTime() {
const now = new Date();
currentDate.textContent = now.toLocaleDateString(&#
39;zh
-CN&#
39;, {
year
: &#
39;numeric&#
39;,
month
: &#
39;long&#
39;,
day
: &#
39;numeric&#
39;,
weekday
: &#
39;long&#
39;
});
currentTime.textContent = now.toLocaleTimeString(&#
39;zh
-CN&#
39;);
}
// 打卡函数
function clock(type) {
// const name = employeeNameInput.value.trim();
const name = employeeNameInput.textContent;
if (!name) {
alert(&#
39;请重新登录&#
39;);
return;
}
// 模拟API请求
const endpoint = type === &#
39;IN&#
39; ? &#
39;in&#
39;
: &#
39;out&#
39;;
const url = `${API_BASE_URL}/${endpoint}?name=${encodeURIComponent(name)}`;
// 显示加载状态
const originalText = type === &#
39;IN&#
39; ? clockInBtn.textContent
: clockOutBtn.textContent;
const button = type === &#
39;IN&#
39; ? clockInBtn
: clockOutBtn;
button.textContent = &#
39;处理中...&#
39;;
button.disabled = true;
// 模拟API请求延迟
setTimeout(() => {
// 创建打卡
记录对象
const record = {
id
: Date.now(),
employeeName
: name,
clockTime
: new Date().toISOString(),
clockType
: type
};
// 添加到本地存储
saveRecord(record);
// 更新UI
addRecordToTable(record);
updateTodayStatus();
// 显示成功消息
alert(type === &#
39;IN&#
39; ? `${name} 上班打卡成功！`
: `${name} 下班签退成功！`);
// 恢复按钮状态
button.textContent = originalText;
button.disabled = false;
// 清空输入框
employeeNameInput.value = &#
39;&#
39;;
}, 800);
}
保存
记录到本地存储
function saveRecord(record) {
const records = JSON.parse(localStorage.getItem(&#
39;clockRecords&#
39;) || &#
39;[]&#
39;);
records.unshift(record);
localStorage.setItem(&#
39;clockRecords&#
39;, JSON.stringify(records));
}
// 从本地存储加载
记录
function loadRecords() {
const records = JSON.parse(localStorage.getItem(&#
39;clockRecords&#
39;) || &#
39;[]&#
39;);
if (records.length === 0) {
emptyMessage.style.display = &#
39;block&#
39;;
recordsBody.inner
HTML = &#
39;&#
39;;
} else {
emptyMessage.style.display = &#
39;none&#
39;;
recordsBody.inner
HTML = &#
39;&#
39;;
records.forEach(record => {
addRecordToTable(record);
});
}
updateTodayStatus();
}
// 添加
记录到表格
function addRecordToTable(record) {
const row = document.createElement(&#
39;tr&#
39;);
// 格式化日期时间
const clockTime = new Date(record.clockTime);
const formattedTime = clockTime.toLocaleString(&#
39;zh
-CN&#
39;);
// 创建行内容
row.inner
HTML = `
<td>${record.employeeName}</td>
<td>${formattedTime}</td>
<td>
<span class="el
-tag ${record.clockType === &#
39;IN&#
39; ? &#
39;el
-tag
--primary&#
39;
: &#
39;el
-tag
--success&#
39;}">
${record.clockType === &#
39;IN&#
39; ? &#
39;上班打卡&#
39;
: &#
39;下班签退&#
39;}
</span>
</td>
`;
recordsBody.prepend(row);
emptyMessage.style.display = &#
39;none&#
39;;
}
// 更新今日打卡状态
function updateTodayStatus() {
const records = JSON.parse(localStorage.getItem(&#
39;clockRecords&#
39;) || &#
39;[]&#
39;);
const today = new Date().toDateString();
// 筛选今日
记录
const todayRecords = records.filter(record => {
const recordDate = new Date(record.clockTime).toDateString();
return recordDate === today;
});
if (todayRecords.length === 0) {
todayStatus.inner
HTML = &#
39;<div>暂无今日打卡
记录</div>&#
39;;
return;
}
// 按时间排序
todayRecords.sort((a, b) => new Date(a.clockTime)
- new Date(b.clockTime));
// 生成状态
HTML
let status
Html = &#
39;&#
39;;
todayRecords.forEach(record => {
const time = new Date(record.clockTime).toLocaleTimeString(&#
39;zh
-CN&#
39;);
status
Html += `
<div class="status
-item">
<span class="status
-indicator ${record.clockType === &#
39;IN&#
39; ? &#
39;status
-in&#
39;
: &#
39;status
-out&#
39;}"></span>
<span>${time}
- ${record.clockType === &#
39;IN&#
39; ? &#
39;上班打卡&#
39;
: &#
39;下班签退&#
39;}</span>
</div>
`;
});
todayStatus.inner
HTML = status
Html;
}
// 页面加载完成后初始化
document.addEventListener(&#
39;DOMContentLoaded&#
39;, init);
</script>
</body>
</
html>
将上诉的写成调用接口的方式，不存储在本地
本文详细介绍了CSS中display:inline的作用，它使得元素如span、div等能以内联方式显示，避免自动换行。了解这一属性对于前端布局至关重要，尤其在调整元素显示方式和优化页面布局时。
扫一扫
780
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
