纯js实现”罗盘”时钟

步骤一：首先需要将多个文字元素呈圆形排放； 步骤二：按一定角度进行旋转。

创建外围框架

`<div class="home">
    <!--年-->
    <div class="year"></div>
    <!--月-->
    <div class="wrapper">
        <div class="circle month"></div>
    </div>
    <!--日-->
    <div class="wrapper">
        <div class="circle days"></div>
    </div>
    <!--时-->
    <div class="wrapper">
        <div class="circle hours"></div>
    </div>
    <!--分-->
    <div class="wrapper">
        <div class="circle minutes"></div>
    </div>
    <!--秒-->
    <div class="wrapper">
        <div class="circle seconds"></div>
    </div>

.home {
    width: 100%;
    height: 100%;
    min-height: 660px;
    min-width: 800px;
    background-color: #000000;
    position: relative;
    color: #666666;
    padding: 20px 0;
    overflow: hidden;
}

.wrapper, .year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle {
    position: relative;
    /*// 添加动画效果*/
    transition: transform 0.4s ease-in-out;
}

.circle span {
    position: absolute;
    white-space: nowrap;
    font-size: 14px;
}

/*// 激活时文字颜色为白色*/
.circle span.active {
    color: #f60;
    font-weight: 700;
}

实现外围秒

根据不同的元素(月、日、时、分、秒)设置外围盒子的宽高，即设置circle盒子的大小，通过函数获取节点，并设置宽高

let boxSize = {
        seconds: 580,
        minutes: 440,
        hours: 320,
        days: 180,
        month: 80
},
// 设置父盒子大小
function divStyle(node, key, deg) {
    node.style.width = data.boxSize[key] + 'px';
    node.style.height = data.boxSize[key] + 'px';
    node.style.transform = `rotate(-${deg}deg)`
}

创建子节点span，有多少个元素，则创建多少个span标签，将其append到div盒子中

function createSpanNode(texts, node, nodeSize, childNode) {
    //texts对应当前的元素，node为父节点对象， nodeSize为父盒子大小
    //创建碎片节点
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < texts.length; i++) {
        //创建span节点
        let spanNode = document.createElement('span');
        spanNode.innerText = texts[i];
        //添加公共class
        spanNode.className = childNode;
        //添加样式
        spanStyle(spanNode, nodeSize, texts, i);
        //添加节点
        fragment.appendChild(spanNode);
    }
    //添加节点
    node.appendChild(fragment);
}

设置span盒子对应的旋转角度、样式等

// span盒子样式
function spanStyle(node, size, texts, index) {
    // node：节点，size：盒子大小，texts：盒子渲染数据，index：对应span个数
    const r = size / 2; //半径
    const deg = getPerDeg(texts); //元素平均间隔度数
    const angle = deg * index;//夹角
    const {a, b} = getHypotenuse(r, angle);
    node.style.top = a + r + 'px';
    node.style.left = b + r + 'px';
    node.style.transform = `rotate(${angle}deg)`;
    node.style.transformOrigin = '0 0';
}

抽离的公共方法

// 元素平均间隔度数
function getPerDeg(texts) {
    return 360 / texts.length;
}

// 已知角度和斜边，获取直角边
function getHypotenuse(long, angle) {
    // 获得弧度
    let radian = 2 * Math.PI / 360 * angle;
    return {
        a: Math.sin(radian) * long, // 邻边
        b: Math.cos(radian) * long // 对边
    }
}

间隔一秒调用runClock方法

// 间隔1秒运行
let currentSeconds = 0, secondsDeg = 0;
let secondsTexts = ['零零',......,'五十九秒'];
function runClock() {
    const d = new Date();
    const seconds = d.getSeconds(); // 秒
    currentSeconds = seconds;
    secondsDeg += getPerDeg(secondsTexts);
    divStyle(secondsNode, 'seconds', secondsDeg);
    spanDynamicStyle(secondsNode, currentSeconds);
}
// 获取节点
function getDivNode(classname) {
    return document.getElementsByClassName(classname)[0];
}
// 设置class类(动态)
function spanDynamicStyle(node, currentIndex) {
    if (currentIndex === 0 && node.childNodes[node.childNodes.length - 1].className.includes('active')) {
        node.childNodes[node.childNodes.length - 1].classList.remove('active');
    }
    if (currentIndex > 0 && node.childNodes[currentIndex - 1].className.includes('active')) {
        node.childNodes[currentIndex - 1].classList.remove('active');
    }
    node.childNodes[currentIndex].classList.add('active');
}

月、日、时、分同理实现

实现年显示

// 设置年
(function setYear() {
    let num = {0: '零', 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '七', 8: '八', 9: '九'}
    document.getElementsByClassName('year')[0].innerText = new Date().getFullYear().toString().split('').map(item => num[item]).join('')
})();

源码地址：Github