阅读 189

模拟时钟

功能描述和最终效果

一个模拟时钟,打开默认是本地时间。

长这样:

时钟.gif

样式

结构是这样的

表盘
    刻度
    针
    中心点
数字时钟
复制代码

表盘:就是个圆

刻度:本来应该是有12个刻度的,但是太麻烦了, 只实现了最好定位的四个。

从第二个开始,角度是30度,位置可以通过三角函数求出但已经忘光了所以...手动定位吧

/* 以第一个为原点
   rotate = (i-1)*30 
   translate(x,y)
*/
/*3点*/
.clock-item:nth-child(4) {
  transform: rotate(90deg) translate(138px, -138px); /*150,-150*/
}
/*6点*/
.clock-item:nth-child(7) {
  transform: rotate(180deg) translate(-4px, -276px); /*0,-300*/
}
/*9点*/
.clock-item:nth-child(10) {
  transform: rotate(270deg) translate(-138px, -138px); /*-150,-150*/
}
复制代码

针:时针分针秒针,因为要记录时间的流逝需要旋转它们,所以别忘了指定旋转原点

.long {
  position: absolute;
  background-color: tomato;
  width: 8px;
  height: 80px;
  top: 50%;
  margin-top: -80px;
  left: 50%;
  margin-left: -4px;
  z-index: 3;
  transform-origin: bottom; /*默认是center*/
}
复制代码

功能

静止版

首先获取当前时间,然后计算角度,反应到时钟的针上。

根据时间获取角度

以秒针为例,秒针一分钟会转一圈。一分钟是60秒,一圈是360°,也就是一秒会转6°。同理,可以得出一分钟、一小时,分针和秒针移动的角度分别是6°和30°。但仔细想想,分针是会随着秒针的变化而缓慢移动的,一分钟是60秒,秒针移动六十次,分针移动一次,那么秒针移动一次,分针就应该移动六十分之一次才对。同理,可以得出分针和时针的角度:

秒针:6°
分针:6°+秒针的角度*0.1
时针:30°+分针的角度*0.5
复制代码

基于上面的公式,可以写出计算角度的函数calcRotate

function calcRotate(type, date) {
        const sec = date.getSeconds();
        const minute = date.getMinutes();
        const hour = date.getHours();
        if (type === "hour") {
          return hour * 30 + minute * 0.5;
        } else if (type === "min") {
          return minute * 6 + sec * 0.1;
        } else {
          return sec * 6;
        }
      }
复制代码

还有操作对应dom的函数changeDomRotate

function changeDomRotate(dom, deg) {
   dom.style.transform = `rotate(${deg}deg)`;
}
复制代码

所以,只需要获取当前时间,作为参数传入,就可以达到效果了

const now_date = new Date();
changeDomRotate(clock_hour, calcRotate("hour", now_date));
changeDomRotate(clock_min, calcRotate("min", now_date));
changeDomRotate(clock_sec, calcRotate("sec", now_date));
复制代码

效果是这样的:

clock1.png

非静止版

把最后四行代码放在setInterval中就行了

setInterval(() => {
        updateDate();
}, 1000);
复制代码

(如果碰到秒针从59->0的时候,指针反转一圈才回到对应位置,可以把过渡效果去掉)

代码

上传到这里了。

文章分类
前端
文章标签