前端DEMO：网络上流行的抖音罗盘

一、效果：

二、关于代码：

CSS/demo.css代码：

* {margin: 0;padding: 0;
}
html,
body {width: 100%;height: 100%;background-color: black;overflow: hidden;
}
#clock {position: relative;width: 100%;height: 100%;background: black;
}
.label {display: inline-block;color: #4d4d4d;text-align: center;padding: 0 5px;font-size: 16px;transition: left 1s, top 1s;transform-origin: 0% 0%;
}

JS/demo.js代码：

var monthText = ["壹月","贰月","叁月","肆月","伍月","陆月","柒月","捌月","玖月","拾月","拾壹月","拾贰月",
];
var dayText = ["壹号","贰号","叁号","肆号","伍号","陆号","柒号","捌号","玖号","拾号","拾壹号","拾贰号","拾叁号","拾肆号","拾伍号","拾陆号","拾柒号","拾捌号","拾玖号","贰拾号","贰拾壹号","贰拾贰号","贰拾叁号","贰拾肆号","贰拾伍号","贰拾陆号","贰拾柒号","贰拾捌号","贰拾玖号","叁拾号","叁拾壹号",
];
var weekText = ["星期日","星期壹","星期贰","星期叁","星期肆","星期伍","星期陆",
];
var hourText = ["零点","壹点","贰点","叁点","肆点","伍点","陆点","柒点","捌点","玖点","拾点","拾壹点","拾贰点","拾叁点","拾肆点","拾伍点","拾陆点","拾柒点","拾捌点","拾玖点","贰拾点","贰拾壹点","贰拾贰点","贰拾叁点",
];
var minuteText = ["壹分","贰分","叁分","肆分","伍分","陆分","柒分","捌分","玖分","拾分","拾壹分","拾贰分","拾叁分","拾肆分","拾伍分","拾陆分","拾柒分","拾捌分","拾玖分","贰拾分","贰拾壹分","贰拾贰分","贰拾叁分","贰拾肆分","贰拾伍分","贰拾陆分","贰拾柒分","贰拾捌分","贰拾玖分","叁拾分","叁拾壹分","叁拾贰分","叁拾叁分","叁拾肆分","叁拾伍分","叁拾陆分","叁拾柒分","叁拾捌分","叁拾玖分","肆拾分","肆拾壹分","肆拾贰分","肆拾叁分","肆拾肆分","肆拾伍分","肆拾陆分","肆拾柒分","肆拾捌分","肆拾玖分","伍拾分","伍拾壹分","伍拾贰分","伍拾叁分","伍拾肆分","伍拾伍分","伍拾陆分","伍拾柒分","伍拾捌分","伍拾玖分","陆拾分",
];
var secondsText = ["壹秒","贰秒","叁秒","肆秒","伍秒","陆秒","柒秒","捌秒","玖秒","拾秒","拾壹秒","拾贰秒","拾叁秒","拾肆秒","拾伍秒","拾陆秒","拾柒秒","拾捌秒","拾玖秒","贰拾秒","贰拾壹秒","贰拾贰秒","贰拾叁秒","贰拾肆秒","贰拾伍秒","贰拾陆秒","贰拾柒秒","贰拾捌秒","贰拾玖秒","叁拾秒","叁拾壹秒","叁拾贰秒","叁拾叁秒","叁拾肆秒","叁拾伍秒","叁拾陆秒","叁拾柒秒","叁拾捌秒","叁拾玖秒","肆拾秒","肆拾壹秒","肆拾贰秒","肆拾叁秒","肆拾肆秒","肆拾伍秒","肆拾陆秒","肆拾柒秒","肆拾捌秒","肆拾玖秒","伍拾秒","伍拾壹秒","伍拾贰秒","伍拾叁秒","伍拾肆秒","伍拾伍秒","伍拾陆秒","伍拾柒秒","伍拾捌秒","伍拾玖秒","陆拾秒",
];
var clock;
var monthList = [];
var dayList = [];
var weekList = [];
var hourList = [];
var minuteList = [];
var secondsList = [];
var isCircle = false;
var textSet = [[monthText, monthList],[dayText, dayList],[weekText, weekList],[hourText, hourList],[minuteText, minuteList],[secondsText, secondsList],
];
window.onload = function () {init();setInterval(function () {runTime();}, 100);changePosition();setTimeout(function () {changeCircle();}, 2000);
};
function init() {clock = document.getElementById("clock");for (var i = 0; i < textSet.length; i++) {for (var j = 0; j < textSet[i][0].length; j++) {var temp = createLabel(textSet[i][0][j]);clock.appendChild(temp);textSet[i][1].push(temp);}}
}
function createLabel(text) {var div = document.createElement("div");div.classList.add("label");div.innerText = text;return div;
}
function runTime() {var now = new Date();var month = now.getMonth();var day = now.getDate();var week = now.getDay();var hour = now.getHours();var minute = now.getMinutes();var seconds = now.getSeconds();initStyle();var nowValue = [month, day - 1, week, hour, minute, seconds];for (var i = 0; i < nowValue.length; i++) {var num = nowValue[i];textSet[i][1][num].style.color = "red";}if (isCircle) {var widthMid = document.body.clientWidth / 2;var heightMid = document.body.clientHeight / 2;for (var i = 0; i < textSet.length; i++) {for (var j = 0; j < textSet[i][0].length; j++) {var r = (i + 1) * 35 + 50 * i;var deg = (360 / textSet[i][1].length) * (j - nowValue[i]);var x = r * Math.sin((deg * Math.PI) / 180) + widthMid;var y = heightMid - r * Math.cos((deg * Math.PI) / 180);var temp = textSet[i][1][j];temp.style.transform = "rotate(" + (-90 + deg) + "deg)";temp.style.left = x + "px";temp.style.top = y + "px";}}}
}
function initStyle() {var label = document.getElementsByClassName("label");for (var i = 0; i < label.length; i++) {label[i].style.color = "white";}
}
function changePosition() {for (let i = 0; i < textSet.length; i++) {for (let j = 0; j < textSet[i][1].length; j++) {let tempX = textSet[i][1][j].offsetLeft + "px";let tempY = textSet[i][1][j].offsetTop + "px";setTimeout(function () {textSet[i][1][j].style.position = "absolute";textSet[i][1][j].style.left = tempX;textSet[i][1][j].style.top = tempY;}, 50);}}
}
function changeCircle() {isCircle = true;clock.style.transform = "rotate(90deg)";
}

index.html代码：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/demo.css">
</head><body><div id="clock"></div><script src="js/demo.js"></script>
</body></html>