css-doodle时钟（定时器驱动版）

马黑黑 · 发表于 2023-5-26 21:38

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

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

x

: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); }

马黑黑 · 发表于 2023-5-26 21:38

代码：

<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 21:38

本帖最后由马黑黑于 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变量。