50projects50days知识点-18-theme-clock

示例网址：

https://50projects50days.com/projects/theme-clock/

http://50projects.tc.cluski.top/50projects50days/theme-clock/

效果：

思路：

排版布局没有什么好说的，都是常规操作。

中间的时钟是通过rotate()来实现的，具体的JavaScript如下：

/**
 * 更新时针、分针、秒针的旋转角度数
 * @param seconds 秒钟
 * @param minutes 分钟
 * @param hours 小时
 */
function updateNeedle(seconds, minutes, hours) {
    let degPerHour = 360 / 12
    let baseHourDeg = degPerHour * hours
    let hourDeg = baseHourDeg + degPerHour * minutes / 60
    needleHour.style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`

    let degPerMinuteOrSec = 360 / 60
    let baseMinuteDeg = degPerMinuteOrSec * minutes
    let minuteDeg = baseMinuteDeg + degPerMinuteOrSec * seconds / 60
    needleMinute.style.transform = `translate(-50%, -100%) rotate(${minuteDeg}deg)`

    let secondDeg = degPerMinuteOrSec * seconds
    needleSecond.style.transform = `translate(-50%, -100%) rotate(${secondDeg}deg)`
}

此外，在本例子中还使用到了CSS的变量，特别是在亮色模式和暗色模式下，变量的值不同了，从而方面了CSS的书写。

:root {
    --primary-color: #000;
    --secondary-color: #fff;
}

html.dark {
    --primary-color: #fff;
    --secondary-color: #333;
}

.needle {
    /* 这里就只需要使用同一个变量名就可以了 */
    background-color: var(--primary-color);
}

transform-origin

transform-origin CSS 属性让你更改一个元素变形的原点。默认的转换原点是 center

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;