时钟的刻度（一）

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

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

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

x

马黑黑 · 发表于 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盒子里。