css-doodle时钟（定时器驱动版）
<css-doodle grid="4" id="myClock">:doodle {
@size: 200px;
border: 10px solid rgba(0,100,200,.8);
border-radius: 50%;
background: lightblue @doodle( /* 刻度 */
:doodle { @grid: 1x60 / 100%; }
@size: 3px;
@place: center;
@shape: circle;
background: navy;
transform: rotate(calc(@i * 6deg)) translate(90px);
) no-repeat;
--sDeg: 0deg; --mDeg: 0deg; --hDeg: 0deg;
}
@place: center;
transform-origin: 50% 100%;
@match(i ≤ 12) { /* 钟点数 */
:before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
transform: rotate(calc(@i * 30deg)) translate(78px) rotate(calc(@i * -30deg));
}
@nth(13) { /* 时针 */
@size: 6px 60px;
@place: 50% 32.5%;
background: linear-gradient(snow,navy);
transform: rotate(var(--hDeg));
}
@nth(14) {/* 分针 */
@size: 4px 80px;
@place: 50% 27.5%;
background: linear-gradient(tan,navy);
transform: rotate(var(--mDeg));
}
@nth(15) { /* 秒针 */
@size: 2px 90px;
@place: 50% 25%;
background: linear-gradient(white,crimson);
transform: rotate(var(--sDeg));
}
@nth(16) { /* 针帽 */
@size: 20px;
@shape: circle;
background: radial-gradient(black,pink);
}
</css-doodle>
<p><br><br><br><br></p>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
(function godPush() {
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
myClock.style.setProperty('--hDeg', hDeg + 'deg');
myClock.style.setProperty('--mDeg', mDeg + 'deg');
myClock.style.setProperty('--sDeg', sDeg + 'deg');
setTimeout(godPush,1000);
})();
})();
</script>
代码：
<css-doodle grid="4" id="myClock">
:doodle {
@size: 200px;
border: 10px solid rgba(0,100,200,.8);
border-radius: 50%;
background: lightblue @doodle( /* 刻度 */
:doodle { @grid: 1x60 / 100%; }
@size: 3px;
@place: center;
@shape: circle;
background: navy;
transform: rotate(calc(@i * 6deg)) translate(90px);
) no-repeat;
--sDeg: 0deg; --mDeg: 0deg; --hDeg: 0deg;
}
@place: center;
transform-origin: 50% 100%;
@match(i ≤ 12) { /* 钟点数 */
:before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
transform: rotate(calc(@i * 30deg)) translate(78px) rotate(calc(@i * -30deg));
}
@nth(13) { /* 时针 */
@size: 6px 60px;
@place: 50% 32.5%;
background: linear-gradient(snow,navy);
transform: rotate(var(--hDeg));
}
@nth(14) {/* 分针 */
@size: 4px 80px;
@place: 50% 27.5%;
background: linear-gradient(tan,navy);
transform: rotate(var(--mDeg));
}
@nth(15) { /* 秒针 */
@size: 2px 90px;
@place: 50% 25%;
background: linear-gradient(white,crimson);
transform: rotate(var(--sDeg));
}
@nth(16) { /* 针帽 */
@size: 20px;
@shape: circle;
background: radial-gradient(black,pink);
}
</css-doodle>
<p><br><br><br><br></p>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
(function godPush() {
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds();
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
myClock.style.setProperty('--hDeg', hDeg + 'deg');
myClock.style.setProperty('--mDeg', mDeg + 'deg');
myClock.style.setProperty('--sDeg', sDeg + 'deg');
setTimeout(godPush,1000);
})();
})();
</script>
本帖最后由 马黑黑 于 2023-5-26 22:00 编辑
说明：
一、css-doodle父元素，:doodle {} 里面，嵌套一个 css-doodle 做刻度背景，代码在 06 - 13 行里。
二、主css-doodle图案是4*4=16个单元格，它们的初始位置放置在图案正中央（16行），旋转圆心统一定为 50% 100% （17行）。
三、单元格序号小于等于 12 的做钟点数字，用伪元素表示（19行）；并利用 transform 的 rotate 和 translate 配合将它们按环形准确排列（20行）。
四、单元格序号为 13、14、15的单元格做时分秒指针，它们有不一样的尺寸和背景色，同时按CSS变量旋转（CSS变量的赋值将由CSS提供）。各指针的定位调整至关重要，依据的是css-doodle的place属性的具体特性。
五、第16个单元格做指针帽。
六、JS代码中，函数 GodPush() 设置为立即执行函数，它内嵌定时器 setTimeout 每隔1000毫秒调用函数自身， 形成永动。该函数获得当前访问者的系统时间，换算为十二小时制驱动时钟的指针，具体做法是将时、分、秒换算成旋转角度，然后传递给CSS变量。
越弄越漂亮了，{:4_199:}这个指针帽比前面那个大了{:4_173:} 红影 发表于 2023-5-26 22:03
越弄越漂亮了，这个指针帽比前面那个大了
大且结实，以免指针掉下来 这个刻度都一样大小了，前面的在数字旁的刻度大点。 红影 发表于 2023-5-26 22:07
这个刻度都一样大小了，前面的在数字旁的刻度大点。
我考虑有数字了，刻度弄成一样的就好 红影 发表于 2023-5-26 22:07
这个刻度都一样大小了，前面的在数字旁的刻度大点。
用手机看效果更佳 马黑黑 发表于 2023-5-26 22:04
大且结实，以免指针掉下来
哈哈，这个怎么可能掉啊{:4_170:} 马黑黑 发表于 2023-5-26 22:09
用手机看效果更佳
主要这个色彩更好了{:4_187:} 红影 发表于 2023-5-26 22:35
哈哈，这个怎么可能掉啊
没指针帽就难说 红影 发表于 2023-5-26 22:36
主要这个色彩更好了
色彩可以随意调整 马黑黑 发表于 2023-5-26 22:08
我考虑有数字了，刻度弄成一样的就好
看起来也更顺眼了。 马黑黑 发表于 2023-5-26 22:36
没指针帽就难说
那就用手按着{:4_189:} 马黑黑 发表于 2023-5-26 22:36
色彩可以随意调整
嗯嗯，这个到时候做帖子时可以根据背景调。 红影 发表于 2023-5-26 22:43
嗯嗯，这个到时候做帖子时可以根据背景调。
没错 红影 发表于 2023-5-26 22:43
那就用手按着
那多累人 红影 发表于 2023-5-26 22:42
看起来也更顺眼了。
纯刻度的表波需要有刻度变化 马黑黑 发表于 2023-5-26 22:54
没错
现在这个颜色感觉做到帖子也不错，都不用调了呢{:4_173:} 马黑黑 发表于 2023-5-26 22:55
那多累人
这个是在图里的，怎么会掉啊{:4_173:}