无尽驱动模式的刻度时钟

马黑黑 发表于 2022-3-21 12:59

本帖最后由马黑黑于 2022-3-21 13:24 编辑 <br /><br /><style type="text/css">

#outer {
margin: auto;
display: flex;
justify-content: center;
width: 200px;
height: 200px;
border: 10px solid rgba(210, 105, 30, .7);
border-radius: 50%;
background: rgba(128, 128, 0, 0.6);
font: 12px/13px Arial;
position: relative;
}

#outer::before {
content: 'HUACHAO';
position: absolute;
width: 50%;
height: 20px;
text-align: center;
top: 75%;
}

#outer div { position: absolute; }

#nyrx {
color: #ddd;
top: 25%;
text-align: center;
}

.kedu {
width: 3px;
height: 4px;
background: #ddd;
transform-origin: 50% 100px;
}

#sec-hand, #min-hand, #hr-hand {
background: white;
bottom: 50%;
transform-origin: 50% 100%;
}

#sec-hand {
width: 2px;
height: 48%;
background: red;
z-index: 10;
}

#sec-hand::before {
content:'';
position: absolute;
background: #eee;
width: 12px;
height: 12px;
border-radius: 50%;
bottom: -4px;
left: -5px;
}

#min-hand {
width: 4px;
height: 45%;
z-index: 9;
}

#hr-hand {
width: 6px;
height: 40%;
z-index: 8 ;
}

</style>

<div id="outer">
<div id="nyrx"></div>
<div id="sec-hand"></div>
<div id="min-hand"></div>
<div id="hr-hand"></div>
</div>

<script>

document.getElementById("outer").innerHTML += setKedu();
godPush();

function godPush() {
let dayStr = "日一二三四五六";
let now = new Date();
let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
min = now.getMinutes(),
sec = now.getSeconds(),
msec = now.getMilliseconds(),
yy = now.getFullYear() + "年",
mm = (now.getMonth() + 1) + "月",
dt = now.getDate() + "日",
dd = "<br>星期" + dayStr.charAt(now.getDay());
let hDeg = hr * 30 + (min * 6 / 12),
mDeg = min * 6 + (sec * 6 / 60),
sDeg = sec * 6 + (msec * 0.36 / 1000);
document.getElementById("nyrx").innerHTML = yy + mm + dt + dd;
document.getElementById("hr-hand").style.transform = "rotate(" + hDeg + "deg)";
document.getElementById("min-hand").style.transform = "rotate(" + mDeg + "deg)";
document.getElementById("sec-hand").style.transform = "rotate(" + sDeg + "deg)";
createkeyFrames("sec-hand", "secRoll", 60,sDeg);
createkeyFrames("min-hand", "minRoll", 3600,mDeg);
createkeyFrames("hr-hand", "hrRoll", 43200,hDeg);
}

function setKedu() {
let str = "", bigKedu = "";
for(i = 0;i < 60;i ++) {
bigKedu = i % 5 == 0? "background: #eee; width: 6px; height: 8px;" : "";
str += "<div class='kedu' style='transform: rotate(" + (i * 6) + "deg);" + bigKedu + "'></div>";
}
return str;
}

function createkeyFrames(el,name,dur,angle) {
let kStr = '@keyframes ' + name + '{to { transform: rotate(' + (360 + angle) + 'deg) } }';
let style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = kStr;
document.getElementById(el).appendChild(style);
document.getElementById(el).style.animation = name + " " + dur + "s linear infinite";
}

</script>

马黑黑 发表于 2022-3-21 13:00

本帖最后由马黑黑于 2022-3-21 13:24 编辑

代码分享：

<style type="text/css">

#outer {
   margin: auto;
   display: flex;
   justify-content: center;
   width: 200px;
   height: 200px;
   border: 10px solid rgba(210, 105, 30, .7);
   border-radius: 50%;
   background: rgba(128, 128, 0, 0.6);
   font: 12px/13px Arial;
   position: relative;
}

#outer::before {
   content: 'HUACHAO';
   position: absolute;
   width: 50%;
   height: 20px;
   text-align: center;
   top: 75%;
}

#outer div { position: absolute; }

#nyrx {
   color: #ddd;
   top: 25%;
   text-align: center;
}

.kedu {
   width: 3px;
   height: 4px;
   background: #ddd;
   transform-origin: 50% 100px;
}

#sec-hand, #min-hand, #hr-hand {
   background: white;
   bottom: 50%;
   transform-origin: 50% 100%;
}

#sec-hand {
   width: 2px;
   height: 48%;
   background: red;
   z-index: 10;
}

#sec-hand::before {
   content:'';
   position: absolute;
   background: #eee;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   bottom: -4px;
   left: -5px;
}

#min-hand {
   width: 4px;
   height: 45%;
   z-index: 9;
}

#hr-hand {
   width: 6px;
   height: 40%;
   z-index: 8 ;
}

</style>

<div id="outer">
   <div id="nyrx"></div>
   <div id="sec-hand"></div>
   <div id="min-hand"></div>
   <div id="hr-hand"></div>
</div>

<script>

document.getElementById("outer").innerHTML += setKedu();
godPush();

function godPush() {
/* 上帝之手 : 时钟的第一推动力→无尽永动
   ① 确定初始角度并旋转指针
   ② 调用创建@keyframes的函数
   ③ 现实年月日星期信息
*/
   let dayStr = "日一二三四五六";
   let now = new Date();
   let hr = now.getHours() > 12 ? now.getHours() - 12 : now.getHours(),
            min = now.getMinutes(),
            sec = now.getSeconds(),
            msec = now.getMilliseconds(),
            yy = now.getFullYear() + "年",
            mm = (now.getMonth() + 1) + "月",
            dt = now.getDate() + "日",
            dd = "<br>星期" + dayStr.charAt(now.getDay());
   let hDeg = hr * 30 + (min * 6 / 12),
            mDeg = min * 6 + (sec * 6 / 60),
            sDeg = sec * 6 + (msec * 0.36 / 1000);
   document.getElementById("nyrx").innerHTML = yy + mm + dt + dd;
   document.getElementById("hr-hand").style.transform = "rotate(" + hDeg + "deg)";
   document.getElementById("min-hand").style.transform = "rotate(" + mDeg + "deg)";
   document.getElementById("sec-hand").style.transform = "rotate(" + sDeg + "deg)";
   createkeyFrames("sec-hand", "secRoll", 60,sDeg);
   createkeyFrames("min-hand", "minRoll", 3600,mDeg);
   createkeyFrames("hr-hand", "hrRoll", 43200,hDeg);
}

function setKedu() {
/* 绘制60个刻度被5整除为整点刻度    */
   let str = "", bigKedu = "";
   for(i = 0;i < 60;i ++) {
            bigKedu = i % 5 == 0? "background: #eee; width: 6px; height: 8px;" : "";
            str += "<div class='kedu' style='transform: rotate(" + (i * 6) + "deg);" + bigKedu + "'></div>";
   }
   return str;
}

function createkeyFrames(el,name,dur,angle) {
/*    创建keyframes动画
   el : 元素id名称
   name : keyframes名称
   dur : duration 动画运行周期
   angle : 初始角度
*/
   let kStr = '@keyframes ' + name + '{to { transform: rotate(' + (360 + angle) + 'deg) } }';
   let style = document.createElement('style');
   style.type = 'text/css';
   style.innerHTML = kStr;
   document.getElementById(el).appendChild(style);
   document.getElementById(el).style.animation = name + " " + dur + "s linear infinite";
}

</script>

马黑黑 发表于 2022-3-21 13:14

这个时钟，HTML结构为两级结构：一个父盒子+若干子盒子。

HTML代码显示，子盒子不算多，其实不然，哪些刻度有60个，全是用 div 盒子做的，通过CSS+JS实现，CSS负责描述样式，JS在页面装载时自动生成并调整刻度的大小、外观和位置。

细心的朋友可能发现，CSS没有 @keyframes 设计，时分秒三个指针也没有 animation，JS里也没有用 setInterval 定时器。是的，情况是酱紫的。那么，时钟是怎么走的？

其实，时钟指针的驱动力来自CSS，由 JS 动态生成了 @keyframes 动画并依次下达指令给三个指针，JS此前还根据当前时间确定了时分秒指针应指向的角度，然后就没JS什么事了。换言之，JS初始化了时分秒指针的方向，并设计 @keyframes 动画交给三个指针运行 animation，它的工作就结束了，后面时钟的运行全靠CSS无尽驱动。

红影发表于 2022-3-21 13:20

这个黑黑把日期也加进去了，厉害的，这个很完美{:4_199:}

加林森 发表于 2022-3-21 13:21

老黑又制作出一个新的教程，真好。{:4_199:}
老黑，我发现一个问题了，今天是：2022-03-21，你那个时间少了一个月呢？

马黑黑 发表于 2022-3-21 13:23

加林森发表于 2022-3-21 13:21
老黑又制作出一个新的教程，真好。
老黑，我发现一个问题了，今天是：2022-03-21，你那个时间少 ...

哦，我忘记加个 1 了

加林森 发表于 2022-3-21 13:27

马黑黑发表于 2022-3-21 13:23
哦，我忘记加个 1 了

现在对了，好样的，老黑真厉害。{:4_190:}

马黑黑 发表于 2022-3-21 13:30

加林森发表于 2022-3-21 13:27
现在对了，好样的，老黑真厉害。

谢谢提醒。
以前用锤子科技的手机，就是锤子手机，农历有31号的，工程师们的错误都是不经意的错误，他们把精力放在了重要功能的实现之上，容易忽略一些小问题。所以测试环节非常重要，可以收集bug然后纠错。

加林森 发表于 2022-3-21 13:42

马黑黑发表于 2022-3-21 13:30
谢谢提醒。
以前用锤子科技的手机，就是锤子手机，农历有31号的，工程师们的错误都是不经意的错误，他们 ...

嗯嗯，这个是很严谨的。

马黑黑 发表于 2022-3-21 13:47

加林森发表于 2022-3-21 13:42
嗯嗯，这个是很严谨的。

{:4_180:}

加林森 发表于 2022-3-21 13:52

马黑黑发表于 2022-3-21 13:47

{:4_190:}

红影发表于 2022-3-21 14:27

我用这个时钟做了个帖子{:4_173:}

马黑黑 发表于 2022-3-21 19:55

红影发表于 2022-3-21 14:27
我用这个时钟做了个帖子

看到了，不错的哦

红影发表于 2022-3-21 20:24

马黑黑发表于 2022-3-21 19:55
看到了，不错的哦

谢谢黑黑鼓励{:4_187:}

来看你 发表于 2022-3-21 20:28

这款比原先那个黑乎乎的更好看 {:5_106:}

马黑黑 发表于 2022-3-21 22:47

来看你发表于 2022-3-21 20:28
这款比原先那个黑乎乎的更好看

还行吧

马黑黑 发表于 2022-3-21 22:48

红影发表于 2022-3-21 20:24
谢谢黑黑鼓励

{:4_180:}

红影发表于 2022-3-22 11:11

马黑黑发表于 2022-3-21 22:48

这个带刻度的时钟太棒了，这是专属的黑黑牌时钟{:4_187:}

加林森 发表于 2022-3-22 11:33

继续学习

闲言不语 发表于 2022-3-22 12:01

厉害了马黑黑{:4_199:}

页: [1] 2 3 4 5

花潮论坛's Archiver

无尽驱动模式的刻度时钟