<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>考勤管理</title>
<style>
.round-button {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<button id="checkInButton" class="round-button">
<span id="timeDisplay"></span>
</button>
<script>
function getNowTime () {
let now = new Date();
let year = now.getFullYear(); //获取完整的年份(4位,1970-????)
let month = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let today = now.getDate(); //获取当前日(1-31)
let hour = now.getHours(); //获取当前小时数(0-23)
let minute = now.getMinutes(); //获取当前分钟数(0-59)
let second = now.getSeconds(); //获取当前秒数(0-59)
let nowTime = ''
nowTime = fillZero(hour) + ':' + fillZero(minute) + ':' + fillZero(second)
return nowTime
};
function fillZero (str) {
var realNum;
if (str < 10) {
realNum = '0' + str;
} else {
realNum = str;
}
return realNum;
}
console.log(getNowTime())
// 2021-10-27 18:17:46
function updateTime() {
const now = new Date();
const hours = now.getHours();
const timeDisplay = document.getElementById('timeDisplay');
if (hours >= 9 && hours < 18) {
timeDisplay.textContent = '上班打卡';
} else {
timeDisplay.textContent = '下班打卡';
}
timeDisplay.textContent = timeDisplay.textContent+getNowTime ();
}
function showAlert() {
alert('打卡成功');
}
document.getElementById('checkInButton').addEventListener('click', showAlert);
updateTime();
setInterval(updateTime, 1000);
</script>
</body>
</html>
