论坛 › 马黑黑教程专版 › 时钟的刻度（二）

马黑黑 发表于 2022-3-19 17:03

时钟的刻度（二）

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

#kedu {
        margin: 20px auto 0;
        width: 20em;
        height: 20em;
        border: 1em solid #8B4513;
        border-radius: 50%;
        background: rgba(0, 0, 0, .8);
        position: relative;
}
#kedu span {
        position: absolute;
        display: block;
        width: 0.3em;
        height: 0.4em;
        background: rgba(0, 128, 0, .85);
        left: calc(50% - 0.2em);
        top: calc(50% - 0.2em);
}

#logo {
        position: absolute;
        font-family: Arial, '微软雅黑';
        font-size: 1em;
        width: 8em;
        color: #111;
        text-align: center;
        top: 70%;
        left: calc(50% - 4em);
}

#hr-hand, #min-hand, #sec-hand {
        position: absolute;
        transform-origin: 100%;
        right: 50%;
}

#hr-hand {
        width: 38%;
        height: 0.3em;
        background: #d2691e;
        border: 0.1em solid #eee;
        bottom: calc(50% - 0.25em);
}

#min-hand {
        width: 42%;
        height: 0.1em;
        background: #eee;
        bottom: calc(50% - 0.05em);
        z-index: 8;
}

#sec-hand {
        width: 46%;
        height: 0.08em;
        background: rgba(255, 0, 0, .8);
        bottom: calc(50% - 0.04em);
        z-index: 10;
}

#sec-hand::before {
        content: "";
        position: absolute;
        width: 0.8em;
        height: 0.8em;
        background: #f5f5f5;
        border-radius: 50%;
        border: 0.2em solid #cd853f;
        left: calc(100% - 0.5em);
        top: calc(50% - 0.5em);
}

</style>

<div id="kedu">
        <div id="logo">HUACHAO</div>
        <div id="sec-hand"></div>
        <div id="min-hand"></div>
        <div id="hr-hand"></div>
</div>

<script language="javascript">
var spanStr = "";
var bigKedu, midKedu;
for(j=0; j<60; j++) {
        bigKedu = (j%15 == 0 ? "width: 0.4em; background: rgba(255, 0, 0, .6);" : "");
        midKedu = (j%5 != 0 ? "width: 0.2em; height: 0.2em; left: calc(50% - 0.1em); top: calc(50% - 0.1em);" : "");
        spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + midKedu + "'></span>";
}
document.getElementById("kedu").innerHTML += spanStr;

rTime();
setInterval(rTime, 1000);

function rTime(){
        var now = new Date();
        var sec = now.getSeconds();
        var sDeg = ((sec / 60) * 360) + 90;
        document.getElementById('sec-hand').style.transform ="rotate(" + sDeg + "deg)";
        var min = now.getMinutes();
        var mDeg = ((min / 60) * 360) + 90;
        document.getElementById('min-hand').style.transform ="rotate(" + mDeg + "deg)";
        var hr = now.getHours();
        var hDeg = ((hr / 12) * 360) + ((min / 60) * 30) + 90;
        document.getElementById('hr-hand').style.transform ="rotate(" + hDeg + "deg)";
}
</script>

马黑黑 发表于 2022-3-19 17:04

本帖最后由 马黑黑 于 2022-3-19 17:29 编辑

代码分享：

<style type="text/css">

#kedu {
      margin: 20px auto 0;
      width: 20em;
      height: 20em;
      border: 1em solid #8B4513;
      border-radius: 50%;
      background: rgba(0, 0, 0, .8);
      position: relative;
}
#kedu span {
      position: absolute;
      display: block;
      width: 0.3em;
      height: 0.4em;
      background: rgba(0, 128, 0, .85);
      left: calc(50% - 0.2em);
      top: calc(50% - 0.2em);
}

#logo {
      position: absolute;
      font-family: Arial, '微软雅黑';
      font-size: 1em;
      width: 8em;
      color: #111;
      text-align: center;
      top: 70%;
      left: calc(50% - 4em);
}

#hr-hand, #min-hand, #sec-hand {
      position: absolute;
      transform-origin: 100%;
      right: 50%;
}

#hr-hand {
      width: 38%;
      height: 0.3em;
      background: #d2691e;
      border: 0.1em solid #eee;
      bottom: calc(50% - 0.25em);
}

#min-hand {
      width: 42%;
      height: 0.1em;
      background: #eee;
      bottom: calc(50% - 0.05em);
      z-index: 8;
}

#sec-hand {
      width: 46%;
      height: 0.08em;
      background: rgba(255, 0, 0, .8);
      bottom: calc(50% - 0.04em);
      z-index: 10;
}

#sec-hand::before {
      content: "";
      position: absolute;
      width: 0.8em;
      height: 0.8em;
      background: #f5f5f5;
      border-radius: 50%;
      border: 0.2em solid #cd853f;
      left: calc(100% - 0.5em);
      top: calc(50% - 0.5em);
}

</style>

<div id="kedu">
      <div id="logo">HUACHAO</div>
      <div id="sec-hand"></div>
      <div id="min-hand"></div>
      <div id="hr-hand"></div>
</div>

<script language="javascript">
var spanStr = "";
var bigKedu, midKedu;
for(j=0; j<60; j++) {
      bigKedu = (j%15 == 0 ? "width: 0.4em; background: rgba(255, 0, 0, .6);" : "");
      midKedu = (j%5 != 0 ? "width: 0.2em; height: 0.2em; left: calc(50% - 0.1em); top: calc(50% - 0.1em);" : "");
      spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + midKedu + "'></span>";
}
document.getElementById("kedu").innerHTML += spanStr;

rTime();
setInterval(rTime, 1000);

function rTime(){
      var now = new Date();
      var sec = now.getSeconds();
      var sDeg = ((sec / 60) * 360) + 90;
      document.getElementById('sec-hand').style.transform ="rotate(" + sDeg + "deg)";
      var min = now.getMinutes();
      var mDeg = ((min / 60) * 360) + 90;
      document.getElementById('min-hand').style.transform ="rotate(" + mDeg + "deg)";
      var hr = now.getHours();
      var hDeg = ((hr / 12) * 360) + ((min / 60) * 30) + 90;
      document.getElementById('hr-hand').style.transform ="rotate(" + hDeg + "deg)";
}
</script>

马黑黑 发表于 2022-3-19 17:04

本帖最后由 马黑黑 于 2022-3-19 17:59 编辑

代码解释：

一、先看看HTML部分

<div id="kedu">
      <div id="logo">HUACHAO</div>
      <div id="sec-hand"></div>
      <div id="min-hand"></div>
      <div id="hr-hand"></div>
</div>

节点不多，一目了然。① 外层div（id=“kedu”）构建时钟的外壳，包括边框和有一点点玻璃质感的时钟表面。② 一个简简单单的logo，像刻上去一样的花潮专属徽标。③三个指针，时针、分针、秒针一个不少。内层的四个div是并列关系。

二、再来看看CSS部分

代码看上去多了些，它们却不很复杂，需要解释的一是特殊的实现思路：三个指针交汇处有个轴盖，它是秒针的伪元素模拟出来的；二是对前一个预览版的刻度时钟的刻度外观的改进，我不再使用margin值的设定，而是对刻度标签进行精准重计算得出定位结果，并在JS中微调那些需要改变刻度大小的刻度元素的位置。大家应该看得出来，现在的时钟刻度有大有小，颜色也不尽相同；三是指针中有设定了 z-index 值的，是为了该在上层的就在上层，不可以被遮挡。

顺便提一下，我设计的指针很粗糙，有兴趣的朋友可以完善一下。

三、最后看看JS部分

<script language="javascript">
var spanStr = "";
var bigKedu, midKedu;
for(j=0; j<60; j++) {
      bigKedu = (j%15 == 0 ? "width: 0.4em; background: rgba(255, 0, 0, .6);" : "");
      midKedu = (j%5 != 0 ? "width: 0.2em; height: 0.2em; left: calc(50% - 0.1em); top: calc(50% - 0.1em);" : "");
      spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + midKedu + "'></span>";
}
document.getElementById("kedu").innerHTML += spanStr;

rTime();
setInterval(rTime, 1000);

function rTime(){
      var now = new Date();
      var sec = now.getSeconds();
      var sDeg = ((sec / 60) * 360) + 90;
      document.getElementById('sec-hand').style.transform ="rotate(" + sDeg + "deg)";
      var min = now.getMinutes();
      var mDeg = ((min / 60) * 360) + 90;
      document.getElementById('min-hand').style.transform ="rotate(" + mDeg + "deg)";
      var hr = now.getHours();
      var hDeg = ((hr / 12) * 360) + ((min / 60) * 30) + 90;
      document.getElementById('hr-hand').style.transform ="rotate(" + hDeg + "deg)";
}
</script>

前面部分，我增加了一个变量，midKedu，本应命名为 smallKedu，之所以是 midkedu 是因为开始时只想针对红色以外的整点刻度，具体编程的时候发现还是针对变小的部分好，做好后忘记了修改名称，反正也不影响，就酱。这个 midkedu 变量，针对要变小的刻度span元素，只要不被5整除的刻度，都不是整点刻度，它们没有理由那么大，变小了定位CSS语句也要改变，left和top值都重新进行计算；整点刻度无需更改定位，因为CSS部分已经做好了。

下来是时钟的驱动函数 rTime()，它从创建的Date对象实体 now 那里获得当前的小时数、分钟数、秒数，然后转换成转角值（变量 sDeg，mDeg，hDeg都是转角值），每一种情形转角值的计算都需要考虑时、分、秒的特征，结合圆周运算并追加 90 度（90的得来与时分秒指针被驱动前的原始角度位置有关，它们需要加上90deg才能处在12点钟方向）。转角值计算好后传递给时分秒指针的div盒子，让它们去到当前时间的位置。但要真正驱动它们永不停止地走下去，还需要请出 setInterval ，让它每隔1秒钟驱动一下指针。

rTime();//运行一次驱动
setInterval(rTime, 1000); //然后每隔一秒钟运行一次驱动

马黑黑 发表于 2022-3-19 18:03

分针的走法，与Windows时钟的走法是一致的：59秒之后才开始步进。一秒移动的时钟风格分针的走法大抵都是如此吧。

马黑黑 发表于 2022-3-19 18:06

钟表的设计其实是在圆周上布局元素，CSS的calc运算在本时钟演示中大放异彩，而JS是个了不起的家伙，在它的辅助下不仅驱动了指针，还协助写HTML代码、动态微调元素的属性。

红影 发表于 2022-3-19 19:16

哇，这个完全是时钟的样子了呢，黑黑太棒了{:4_199:}

红影 发表于 2022-3-19 19:17

还有花潮的LOGO 呢，谢谢黑黑{:4_187:}

红影 发表于 2022-3-19 19:27

这个设计非常精细了，黑黑辛苦{:4_187:}

马黑黑 发表于 2022-3-19 20:47

咦，怎么会回帖仅作者可见

查看完整版本: 时钟的刻度（二）