svg时钟（石英钟定稿）

马黑黑 · 发表于 2024-10-10 07:52

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

<style>
	#papa { margin: 30px; text-align:center; }
	#hHand, #mHand, #sHand { animation: turning var(--dur) linear infinite; }
	#hHand { --begin: 0deg; --dur: 216000s; }
	#mHand { --begin: 0deg; --dur: 3600s; }
	#sHand { --begin: 0deg; --dur: 60s; }
	#kedu { font: normal 16px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; text-anchor: middle; dominant-baseline: middle; fill: cyan; user-select: none; }
	@keyframes turning { from { transform: rotate(var(--begin)); } to { transform: rotate(calc(360deg + var(--begin))); } }
</style>

<div id="papa">
	<svg id="clock" width="300" height="300" viewBox="-100 -100 200 200">
		<defs>
			<linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
				<stop offset="0%" stop-color="red" />
				<stop offset="50%" stop-color="green" />
				<stop offset="100%" stop-color="navy" />
			</linearGradient>
			</defs>
		<circle cx="0" cy="0" r="95" fill="dimgray" stroke="url(#bg)" stroke-width="10" />
		<g id="kedu">
			<text font-size="14" fill="silver" text-anchor="middle">
				<tspan id="tdate" x="5" y="-35">日期</tspan>
				<tspan id="tday" x="0" y="-15">星期</tspan>
				<tspan x="0" y="40" fill="gray">HUACHAO</tspan>
			</text>
		</g>
		<line id="hHand" x1="0" y1="0" x2="0" y2="-65" stroke="whitesmoke" stroke-width="4" />
		<line id="mHand" x1="0" y1="0" x2="0" y2="-75" stroke="snow" stroke-width="3" />
		<line id="sHand" x1="0" y1="0" x2="0" y2="-85" stroke="white" stroke-width="2" />
		<circle cx="0" cy="0" r="6" fill="red" stroke="white" stroke-width="2" />
	</svg>
</div>

<script>
setAttr = (elm, objData) => {
	for(var key in objData) {
		elm.setAttribute(key, objData[key]);
	}
};

mkScale = (total=60) => {
	var deg = 360 / total;
	Array(total).fill('').forEach((l,k) => {
		var w = -6;
		if(k % 5 === 0) {
			var t = document.createElementNS('http://www.w3.org/2000/svg', 'text');
			setAttr(t, {transform: `rotate(${deg * k - 60} 0 0) translate(75) rotate(${-1 * (deg * k - 60)} 0 0)`});
			t.textContent = k / 5 + 1;
			kedu.appendChild(t);
			w = -4;
		}
		l = document.createElementNS('http://www.w3.org/2000/svg', 'line');
		setAttr(l, {transform: `rotate(${deg * k - 60} 0 0) translate(90)`, x1: 0, y1: 0, x2: w, y2: 0, stroke: 'cyan'});
		kedu.appendChild(l);
	});
};

setTime = () => {
	var now = new Date();
	var hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
		min = now.getMinutes(),
		sec = now.getSeconds(),
		msec = now.getMilliseconds();
	var hDeg = hr * 30 + (min * 6 / 12),
		mDeg = min * 6 + (sec * 6 / 60),
		sDeg = sec * 6 + (msec * 0.36 / 1000);
	hHand.style.setProperty('--begin', hDeg + 'deg');
	mHand.style.setProperty('--begin', mDeg + 'deg');
	sHand.style.setProperty('--begin', sDeg + 'deg');
};

setDate = () => {
	var sDate = new Date();
	var sDateS = sDate.getSeconds() * 1000,
		sDateMs = sDate.getMilliseconds();
	tdate.textContent = `${sDate.getFullYear()}年${sDate.getMonth() + 1}月${sDate.getDate()}日`;
	tday.textContent = `星期${'日一二三四五六'.substr(sDate.getDay(),1)}`;
	setTimeout( () => {
		setDate();
	}, 60000 - sDateS - sDateMs);
};

mkScale();
setTime();
setDate();
</script>