使用html+css+js实现一个仿钉钉打卡按钮

<!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>