无尽驱动模式的刻度时钟

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

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

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

x

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

马黑黑 · 发表于 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无尽驱动。