.hand {

    width: 50%;

    height: 6px;

    background: black;

    position: absolute;

    top: 50%;

    /* 更改转换元素的位置，以达到中心点在钟表的中心 */

    transform-origin: 100%;

    transform: rotate(90deg);

    transition: all 0.05s;

    /* 指定切换效果的速度 cubic-bezier贝塞尔曲线，我查了一下，他好像是有个公式的，四个参数分别为x1,y1,x2,y2，单从数值上好像看不出快慢的规律*/

    transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);

}

const secondHand = document.querySelector('.second-hand');

const minsHand = document.querySelector('.min-hand');

const hourHand = document.querySelector('.hour-hand');

function setDate() {

    const now = new Date();

    // 得到当前秒数

    const seconds = now.getSeconds();

    // 得到正常在圆内的度数,因为初始旋转度数为90度,所以要加上90度

    const secondsDegrees = ((seconds / 60) * 360) + 90;

    secondHand.style.transform = `rotate(${secondsDegrees}deg)`;

    const mins = now.getMinutes();

    // 得到当前分钟在圆内的度数,再加上秒钟在钟表内一格所处的度数,一格为6度(360/(12*5))

    const minsDegrees = ((mins / 60) * 360) + ((seconds / 60) * 6) + 90;

    minsHand.style.transform = `rotate(${minsDegrees}deg)`;

    const hour = now.getHours();

    // 得到当前小时在圆内的度数,再加上分钟在小时钟表内一格所处的度数,一格为30度(360/12)

    const hourDegrees = ((hour / 12) * 360) + ((mins / 60) * 30) + 90;

    hourHand.style.transform = `rotate(${hourDegrees}deg)`;

}

// 每秒渲染一次

setInterval(setDate, 1000);

setDate();