博客

在地铁站看到一款旁边的人在刷音，看到一款神奇的壁纸，非常炫酷，名曰 “罗盘时钟 ” 后来查了一下，叫八卦时钟、旋转时钟的说法也有，当然这不是重点，重点是这个效果是怎么实现的？故作此文：

整个的时钟代码详见Github ：


https://github.com/zhangtsh5/Rotating-Clock

总体思路

首先肯定要把所有会出现的日期都放在页面上，然后经过某种变换，变成圆形的状态，利用js实现动态根据实时的时间进行旋转，css中提供了一个属性可以完成这种页面的变化，transform，因此可以大概设计出大体的主函数框架：

//时钟页面
let clock;

window.onload = function () {
    init();
    // 每隔100ms获得 当前时间
    setInterval(function () {
        runTime();
    }, 100);

    // 旋转之前定位到当前时间
    locateCurrent();
    // 3秒后变成旋转样式
    setTimeout(function () {
        toRotate();
    }, 3000);
}

函数实现

那么接下来要做的就是完善每一个函数的具体功能

init:页面初始化函数，就是将那些所有会出现的时间日期名词平铺在页面上

// 初始化函数
function init() {
    clock = document.getElementById('clock');
    // 生成标签 存放文字展示
    for (let i = 0; i < timeTextSet.length; i++) {
        for (let j = 0; j < timeTextSet[i][0].length; j++) {
            let temp = createLabel(timeTextSet[i][0][j]);
            clock.appendChild(temp);
            // 将生成的标签存放在数组list中
            timeTextSet[i][1].push(temp);
        }
    }
}