前端DEMO：网络上流行的抖音罗盘
生活随笔
收集整理的這篇文章主要介紹了
前端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>三、源碼完整版地址：
https://github.com/CuiYanchang-Github/Html-Example/tree/master/%E6%8A%96%E9%9F%B3%E7%BD%97%E7%9B%98
總結
以上是生活随笔為你收集整理的前端DEMO：网络上流行的抖音罗盘的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux常用的命令及操作技巧
- 下一篇： java选择题多选题系统小程序_单选题与