一个带旋转、很漂亮的时间罗盘
简单讲下实现思路
1、先在html将所有元素按年、月、日、周、时、分、秒分类，每种类型以div划分，给div指定一个id，每个div下面的元素用 ul 的 li 包含，新建个 css 将所有 li 元素共用一个中心点，设置宽高、水平对齐、行对齐、背景、字段颜色等样式
html 中部分代码截图
2、写个js文件将日期和html中的元素进行绑定，并设置每秒钟进行旋转
全部js代码如下
$(function () {/*** 旋转元素* @param elementId 元素Id* @param currNumber 日期数值* @param translateNumber 元素距离中心点的距离*/function rotateElement(elementId, currNumber, translateNumber) {const $id = $('#' + elementId + ' ul li');// 圆所包含的元素个数let circleSize = $id.size();// 计算平均每个角的弧度let circleDeg = 360 / circleSize;// 计算角的弧度偏差let offsetDeg = circleDeg * currNumber;// 对与当前时间匹配的元素添加样式并去除其它元素的样式$id.eq(currNumber).addClass('elementActive').siblings().removeClass('elementActive');// 渲染所有元素for (let i = 0; i < circleSize; ++i) {$id.eq(i).css({'transition': currNumber === 0 ? '' : '.8s transform','transform': 'rotate(' + (circleDeg * i - offsetDeg) + 'deg) translate(' + translateNumber + 'px, 0px)'})}}function init(callback) {let date = new Date();$("#yearId ul li").text(date.getFullYear() + "年");rotateElement('secondId', date.getSeconds(), 400);rotateElement('minusId', date.getMinutes(), 340);rotateElement('hourId', date.getHours(), 280);rotateElement('weekId', date.getDay() - 1, 220);rotateElement('dayId', date.getDate() - 1, 160);rotateElement('monthId', date.getMonth(), 100);rotateElement('yearId', date.getFullYear(), 0);(callback instanceof Function) && callback();}// 先初始化init(function () {// 循环调度setInterval(function () {init();}, 1000);});});
完整代码下载地址： 点我
