JS代码点滴

花简静

凡哥 发表于 2024-10-10 19:54

是我见识短，这下子开眼界了。。
还有别的复杂图案么。。。

凡哥

2024年10月10日 星期四

原创svg石英钟

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

凡哥

花简静 发表于 2024-10-10 20:00
是我见识短，这下子开眼界了。。
还有别的复杂图案么。。。

你去阿里粑粑矢量图库找找，应有尽有，得注册，不花钱钱的：

https://www.iconfont.cn/

花简静

凡哥 发表于 2024-10-10 20:00
PS也是由代码支撑的。如果你会，你画成的成品，可以导出全代码的。

我不会。。。。

花简静

凡哥 发表于 2024-10-10 20:00
PS也是由代码支撑的。如果你会，你画成的成品，可以导出全代码的。

怎么可能，那么复杂的图像及色彩

花简静

凡哥 发表于 2024-10-10 20:06
你去阿里粑粑矢量图库找找，应有尽有，得注册，不花钱钱的：

https://www.iconfont.cn/ ...

这个太好了，存起来先。。

凡哥

花简静 发表于 2024-10-10 20:18
怎么可能，那么复杂的图像及色彩

所有的一切都是由代码描述或记录的

花简静

凡哥 发表于 2024-10-10 23:11
所有的一切都是由代码描述或记录的

你说的我好想试试怎么把图整成代码。。。

花简静

凡哥 发表于 2024-10-10 23:11
所有的一切都是由代码描述或记录的

有道理，但还是感觉不可思议。。

凡哥

花简静 发表于 2024-10-11 20:25
有道理，但还是感觉不可思议。。

你可以这么想：过去，计算机没有图形，都是代码；微软的Windows创意来自乔布斯，在Windows 1.0 至 3.x 都是通过运行命令才有的图形界面，到了 Windows 9X 直接进入图形界面但还是基于dos命令模式的。现在的Windows都有dos命令模式，那可是老祖宗，全用代码操作一切。