编程技术

Document

Html+CSS+JS 打造简洁 数码数码时钟

图：

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数码时钟</title>
	<style>
		body{
			margin: 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100vh;
			justify-content: center;
			/* background: url(./img/bg.png); */
			background-size: cover;
		}
		
		h2{
			text-transform: uppercase;
			letter-spacing: 4px;
			font-size: 14px;
			text-align: center;
			color: blueviolet;
		}
		
		.clock{
			display: flex;
		}
		
		.clock div{
			margin: 5px;
			position: relative;
		}
		
		.clock span{
			width: 100px;
			height: 80px;
			background: slateblue;
			opacity: 0.8;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50px;
			text-shadow: 2px 2px 4px rgba(0, 0,0, 0.3);
		}
		
		.clock .text{
			height: 30px;
			font-size: 10px;
			text-transform: uppercase;
			letter-spacing: 2px;
			background: darkblue;
			opacity: 0.8;
		}
		
		.clock #ampm{
			bottom: 0;
			position: absolute;
			width: 60px;
			height: 30px;
			font-size: 20px;
			background: green;
		}
	</style>
</head>
<body>
	<h2>数码时钟</h2>
	<div class="clock">
	<div>
		<span id="hour">00</span>
		<span class="text">Hours</span>
	</div>
	<div>
		<span id="minutes">00</span>
		<span class="text">Minutes</span>
	</div>
	<div>
		<span id="seconds">00</span>
		<span class="text">Seconds</span>
	</div>
	<div>
		<span id="ampm">AM</span>
	</div>
	</div>
	
	<script>
		const hourEl = document.getElementById("hour");
		const minuteEL = document.getElementById("minutes");
		const secondsEl = document.getElementById("seconds");
		const ampmEl = document.getElementById("ampm");
		
		function updateClock(){
			let h = new Date().getHours();
			let m = new Date().getMinutes();
			let s = new Date().getSeconds();
			let ampm = "AM"
			
			if(h > 12){
				h = h - 12;
				ampm = "PM";
			}
			
			h = h<10 ? "0" + h:h;
			m = m<10 ? "0" + m:m;
			s = h<10 ? "0" + s:s;
			
			
			hourEl.innerText = h;
			minuteEL.innerText = m;
			secondsEl.innerText = s;
			ampmEl.innerText = ampm;
			setTimeout(()=>{
				updateClock();
			},1000)
		}
		
		updateClock();
	</script>
</body>
</html>