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

马黑黑 发表于 2022-3-19 10:12

时钟的刻度（一）

<style type="text/css">

#kedu {
        margin: 20px auto 0;
        width: 20em;
        height: 20em;
        border: 1em solid #000;
        border-radius: 50%;
        background: rgba(0, 0, 0, .75);
        position: relative;
}
#kedu span {
        margin: -0.3em 0 0 -0.1em;
        position: absolute;
        display: block;
        width: 0.2em;
        height: 0.6em;
        background: green;
        left: 50%;
        top: 50%;
}

</style>

<div id="kedu"></div>

<script language="javascript">
var spanStr = "";
var bigKedu = "";
for(j=0; j<60; j++) {
        bigKedu = (j%15 == 0 ? "width: 0.3em; background: red;" : "");
        spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + "'></span>";
}
document.getElementById("kedu").innerHTML = spanStr;
</script>

马黑黑 发表于 2022-3-19 10:13

先给代码，解释敬请期待：

<style type="text/css">

#kedu {
        margin: 20px auto 0;
        width: 20em;
        height: 20em;
        border: 1em solid #000;
        border-radius: 50%;
        background: rgba(0, 0, 0, .75);
        position: relative;
}
#kedu span {
        margin: -0.3em 0 0 -0.1em;
        position: absolute;
        display: block;
        width: 0.2em;
        height: 0.6em;
        background: green;
        left: 50%;
        top: 50%;
}

</style>

<div id="kedu"></div>

<script language="javascript">
var spanStr = "";
var bigKedu = "";
for(j=0; j<60; j++) {
        bigKedu = (j%15 == 0 ? "width: 0.3em; background: red;" : "");
        spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + "'></span>";
}
document.getElementById("kedu").innerHTML = spanStr;
</script>

马黑黑 发表于 2022-3-19 10:13

本帖最后由 马黑黑 于 2022-3-19 12:11 编辑

代码解释：

本例，首先设置了一个div盒子，20em * 20em 的宽高尺寸，令其边框为 1em 、实体、黑色，边框半径为50%得出圆形钟表的外壳，背景色是黑色且设置为一点点的透明令其有深邃感，最后位置属性为相对定位。

#kedu {
      margin: 20px auto 0;
      width: 20em;
      height: 20em;
      border: 1em solid #000;
      border-radius: 50%;
      background: rgba(0, 0, 0, .75);
      position: relative;
}


接着要鼓捣刻度。这里用 <span> 标签：

#kedu span {
      margin: -0.3em 0 0 -0.1em;
      position: absolute;
      display: block;
      width: 0.2em;
      height: 0.6em;
      background: green;
      left: 50%;
      top: 50%;
}


外边距的设定基本靠蒙，连蒙带试，差不多的好吧。margin的设置，其作用是微调，毕竟随后使用的旋转与移位很难做到精确，总得有个处理机制。定位设为绝对定位，呈现模式（display）设为block，否则span标签会排排坐。接着是宽与高，分别为0.2em和0.6em，背景色为绿色，最后是设定所有span元素的初始位置，left和top都是50%，以便随后它们的旋转与移位更方便设定。

60个刻度用HTML一个一个地写不是勤快的懒人所欲为，所以祭出JS大法去完成这些繁琐的HTML代码：

var spanStr = "";
var bigKedu = "";
for(j=0; j<60; j++) {
      bigKedu = (j%15 == 0 ? "width: 0.3em; background: red;" : "");
      spanStr += "<span style='transform: rotate(" + j*6 + "deg) translateY(-9.6em);" + bigKedu + "'></span>";
}
document.getElementById("kedu").innerHTML = spanStr;


先声明两个字符串变量：spanStr 用于装载所有即将拼接的 span 标签描述语句，bigKedu 用于装载大刻度描述语句。什么是大刻度？就是3点、6点、9点和12点四个钟点的刻度，一般的手表、时钟若用到60个刻度的，都让这四个钟点的刻度大一些、颜色也不同于其他刻度。我们的for语句循环60次，四等分的四个刻度循环到时就给 bigKedu 变量赋值（否则是空值），然后加入到 spanStr 变量中。JS代码中，红色部分就是处理刻度是否为大刻度，单独解释如下：

我用一个三元运算来处理每一次的for循环，如果步进变量 j 被 15 整除（%是取余数运算符），则设置刻度为大一点、背景色是红色，否则啥也不做。这里，变量 bigKedu 每一次循环都会等于一个值，要么是 "width: 0.3em; background: red;" ，要么是 "" 即空值。

for的另一个语句是拼接 span 标签描述字串，bigKedu 变量已加入其中。其他它做的事情还有，设定旋转和移位，旋转（rotate）的依据是步进变量 j，j 要乘以 6 因为我们将圆周分成60个等分，移位是垂直移位（translateY），这是让各个刻度分散到圆周边缘内的指令，移动的数值 -9.6em 靠心算，考虑到了表盘半径（10em）、刻度高度（0.6em）然后再测试、调整。

js最后一句大家能看懂的，把拼接的span标签的描述语句呈现在表盘的div盒子里。

红影 发表于 2022-3-19 11:44

漂亮。先去午饭，回来学习{:4_187:}

红影 发表于 2022-3-19 12:01

这个逢15度变色特别好，很像时钟的样子呢{:4_187:}

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

红影 发表于 2022-3-19 12:01
这个逢15度变色特别好，很像时钟的样子呢

尽量模拟现实生活中的器物

小辣椒 发表于 2022-3-19 12:38

啊~~~时钟效果也出来了，黑黑的教学速度有点快的

红影 发表于 2022-3-19 12:42

马黑黑 发表于 2022-3-19 12:04
尽量模拟现实生活中的器物

我知道你为什么做这么大的刻度了，是想把那个数字时钟放到这个里面的吧{:4_173:}

红影 发表于 2022-3-19 12:55

“设定旋转和移位，旋转（rotate）的依据是步进变量 j，j 要乘以 6 因为我们将圆周分成60个等分”
从这里开始就比较难懂，设定60等分，正好对应60分，为什么还乘以6呢？

红影 发表于 2022-3-19 12:57

红影 发表于 2022-3-19 12:55
“设定旋转和移位，旋转（rotate）的依据是步进变量 j，j 要乘以 6 因为我们将圆周分成60个等分”
从这里 ...

哦哦，我知道了，一个圆总共360度，每6度一个刻画，正好有60个刻画。看把我笨的{:4_173:}

马黑黑 发表于 2022-3-19 12:57

红影 发表于 2022-3-19 12:55
“设定旋转和移位，旋转（rotate）的依据是步进变量 j，j 要乘以 6 因为我们将圆周分成60个等分”
从这里 ...

平均每一个刻度占用的弧度是6个单位

马黑黑 发表于 2022-3-19 12:58

红影 发表于 2022-3-19 12:42
我知道你为什么做这么大的刻度了，是想把那个数字时钟放到这个里面的吧

数字可以放，现在暂时不考虑

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

小辣椒 发表于 2022-3-19 12:38
啊~~~时钟效果也出来了，黑黑的教学速度有点快的

前两天讨论那个模拟时钟的播放器按钮时，说到时钟刻度的问题，弄个玩玩

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

红影 发表于 2022-3-19 12:57
哦哦，我知道了，一个圆总共360度，每6度一个刻画，正好有60个刻画。看把我笨的

心算要好{:5_106:}

红影 发表于 2022-3-19 20:18

马黑黑 发表于 2022-3-19 12:04
尽量模拟现实生活中的器物

万物皆可模拟，太厉害了{:4_199:}

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

马黑黑 发表于 2022-3-19 12:57
平均每一个刻度占用的弧度是6个单位

嗯嗯，现在弄明白了{:4_173:}

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

马黑黑 发表于 2022-3-19 12:58
数字可以放，现在暂时不考虑

还可以放数字的啊，越来越完美了{:4_199:}

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

马黑黑 发表于 2022-3-19 17:03
心算要好

反应要快，我到后面才反应过来{:4_173:}

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

红影 发表于 2022-3-19 20:20
反应要快，我到后面才反应过来

圆周与曲率都是很难理解的。知道古人如何求圆周率吧，用割圆法，把圆的平面割成一个一个的正方形，割的正方形越小精准度就会越高。

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

红影 发表于 2022-3-19 20:19
还可以放数字的啊，越来越完美了

可以放的。实际上，我已经弄出一个数字表盘的时钟

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