html--时钟 - 技术栈

html

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>clock</title>

<link type="text/css" href="css/style.css" rel="stylesheet" />

<script type="text/javascript">
function isInt(n) {
	return parseInt(n) === n;
}

function rotate(x, y, angle) {
	var A, R, rad;
	rad = (angle == 0 ? 270 : angle) * Math.PI / 180;
	A = Math.atan2(y, x) + rad;
	R = Math.sqrt(x * x + y * y);
	return {
		x: Math.cos(A) * R,
		y: Math.sin(A) * R
	};
}

function rotateElement(el, deg) {
	el.style.transform = `rotate(${deg}deg)`;
}
</script>
</head>

<body>

<div class="clock">
	<ul class="mark">
		<script>
			{
				let i = 0;
				let html = '';
				while (i < 60) {
					let n = i / 5 % 12;
					n = n === 0 ? 12 : n;
					let bold = isInt(n);
					html +=
						`<li class="${bold ? ' bold': ''}" style="transform: translateY(250px) rotate(${i * 6}deg);"></li>`;
					i++;
				}
				document.write(html);
			}
		</script>
	</ul>
	<script>
		{
			let angle = 30,
				x = 110,
				y = -190,
				i = 1,
				html = '';
			html += `<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;
			while (i++ < 12) {
				let pos = rotate(x, y, angle);
				x = pos.x;
				y = pos.y;
				html += `<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;
			}
			document.write(html);
		}
	</script>
	
	<div class="time">
		<div id="date"></div>
		<div id="now"></div>
		<div id="day"></div>
	</div>
	
	<div class="hour-hand" id="h"></div>
	<div class="minute-hand" id="m"></div>
	<div class="second-hand" id="s"></div>
	<div class="center"></div>
	
</div>

<script>
{
	let f = (e, i) => (i != 0 && e < 10 ? '0' + e : e);
	setInterval(() => {
		let t = new Date();
		rotateElement(h, t.getHours() * 30 + t.getMinutes() / 60 * 30);
		rotateElement(m, t.getMinutes() * 6 + t.getSeconds() / 60 * 6);
		rotateElement(s, t.getSeconds() * 6 + t.getMilliseconds() / 1000 * 6);
		date.innerHTML = [t.getFullYear(), t.getMonth() + 1, t.getDate()].map(f).join('-');
		day.innerHTML = '星期' + '日一二三四五六' [t.getDay()];
		now.innerHTML = [t.getHours(), t.getMinutes(), t.getSeconds()].map(f).join(':');
	}, 1000 / 60);
}
</script>

</body>
</html>

css

css 复制代码

@charset "utf-8";
* {
	margin: 0;
	padding: 0;
}

ul,
ul>li {
	list-style-type: none;
}

body {
	background-color: #0c020b;
}

.clock {
	width: 500px;
	height: 500px;
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.clock .mark {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 100%;
	height: 100%;
}

.clock .mark li {
	position: absolute;
	width: 6px;
	height: 2px;
	background: #fff;
	transform-origin: 250px;
	box-shadow: 0 0 10px #ffeab0;
}

.clock .mark li.bold {
	width: 8px;
	height: 4px;
}

.clock .numbers {
	position: absolute;
	left: 238px;
	top: 238px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	width: 24px;
	height: 24px;
	text-align: center;
	color: #fff;
	text-shadow: 0 0 10px #ffeab0;
}

.clock .center {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 24px;
	height: 24px;
	border-radius: 20px;
	background: #ff1138;
}

.clock .hour-hand,
.clock .minute-hand,
.clock .second-hand {
	box-shadow: 2px 2px 5px #ffeab0;
}

.clock .hour-hand {
	position: absolute;
	left: 247px;
	top: 150px;
	width: 6px;
	height: 140px;
	background: #fff;
	transform-origin: 3px 100px;
}

.clock .minute-hand {
	position: absolute;
	left: 248px;
	top: 70px;
	width: 4px;
	height: 220px;
	background: #fff;
	transform-origin: 2px 180px;
}

.clock .second-hand {
	position: absolute;
	left: 249px;
	top: 40px;
	width: 2px;
	height: 280px;
	background: #fff;
	transform-origin: 1px 210px;
}

.clock .time {
	padding: 10px;
	position: absolute;
	left: 260px;
	top: 330px;
	font-size: 12px;
	font-weight: bold;
	background: #110022;
	color: #ff1138;
}