svg时钟（石英钟定稿）

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

<div id="showRes" style="margin: 30px; text-align: center;"></div>
<div class="hE"><pre id="pre">
<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);
}
};

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>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);

var runCodes = (str,target) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
target.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};

runCodes(pre.innerText, showRes);
</script>

马黑黑 发表于 2024-10-10 07:55

在初稿基础上：

（一）做一下配色调整；
（二）JS加一个setAttr函数，简化创建svg元素时繁琐的setAttribute属性设置。

马黑黑 发表于 2024-10-10 08:00

svg包裹在 id="papa" 的div里面。papa没有做过多的CSS设置，仅外边距和约束 inline-block 行内块状元素居中（时钟svg水平居中）。svg id=“clock"，未有CSS设置。

红影发表于 2024-10-10 09:55

越修改越是完美了。svg版时钟定稿版。
又想把这个置顶了{:4_173:}

梦江南 发表于 2024-10-10 10:01

用代码做的时钟，很准啊！太厉害了！{:4_187:}

红影发表于 2024-10-10 10:07

全代码的时钟，特别喜欢这类设计，代码让这个世界的四维中的一维被忠实记录并显现着。

花飞飞 发表于 2024-10-10 20:10

马黑黑发表于 2024-10-10 08:00
svg包裹在 id="papa" 的div里面。papa没有做过多的CSS设置，仅外边距和约束 inline-block 行内块状元素居中 ...

{:5_106:}这SVG时钟太高级了，闪亮出场跟明星一样。。沉稳大气，又帅又潇洒

马黑黑 发表于 2024-10-10 20:12

花飞飞发表于 2024-10-10 20:10
这SVG时钟太高级了，闪亮出场跟明星一样。。沉稳大气，又帅又潇洒

非常满意的说？

马黑黑 发表于 2024-10-10 20:12

红影发表于 2024-10-10 10:07
全代码的时钟，特别喜欢这类设计，代码让这个世界的四维中的一维被忠实记录并显现着。

{:4_190:}

花飞飞 发表于 2024-10-10 20:17

马黑黑发表于 2024-10-10 20:12
非常满意的说？

实用又漂亮的东东万里挑里一，为何不一百二十分的满意。。{:4_173:}

马黑黑 发表于 2024-10-10 20:18

花飞飞发表于 2024-10-10 20:17
实用又漂亮的东东万里挑里一，为何不一百二十分的满意。。

满意爆表了

花飞飞 发表于 2024-10-10 20:31

马黑黑发表于 2024-10-10 20:18
满意爆表了

那也未尝不可

红影发表于 2024-10-10 20:49

马黑黑发表于 2024-10-10 20:12

谢大咖{:4_187:}

马黑黑 发表于 2024-10-10 21:56

花飞飞发表于 2024-10-10 20:31
那也未尝不可

满则溢

花飞飞 发表于 2024-10-13 16:08

马黑黑发表于 2024-10-10 21:56
满则溢

{:4_173:}换个大茶缸

马黑黑 发表于 2024-10-13 17:10

花飞飞发表于 2024-10-13 16:08
换个大茶缸

还会满的

花飞飞 发表于 2024-10-13 17:25

马黑黑发表于 2024-10-13 17:10
还会满的

先喝。。。等满了再说，{:4_173:}

花飞飞 发表于 2024-10-13 20:51

马黑黑发表于 2024-10-13 17:10
还会满的

满了就是满意，寓意好

梦油发表于 2024-10-13 21:03

走时真准！

马黑黑 发表于 2024-10-13 22:23

梦油发表于 2024-10-13 21:03
走时真准！

用你电脑上的时间

页: [1] 2

花潮论坛's Archiver

svg时钟（石英钟定稿）