一、效果：

二、关于代码：

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：网络上流行的抖音罗盘相关推荐

阿里云视频上传到抖音服务器
就是从一个阿里云读一个文件,然后再上传到抖音服务器上面去,我是直接用一个数组去存储阿里云文件流信息,接收完成后,再上传抖音服务器,这样就有一个问题:就是这个文件太大的话内存就溢出,这个有啥好方法不? ...
一台服务器控制上百个抖音账号,怎么批量管理上百个抖音，抖音mcn一键高效运营软件...
原标题:怎么批量管理上百个抖音,抖音mcn一键高效运营软件易媒助手:文章.短视频同时分发软件正因为憧憬收获更喜人的广告分成,通常个人选择性注册秒拍.皮皮虾等10多个热门内容平台,如果你们只同步文章 ...
65.深度解密网络项目三：抖音起名项目整体步骤详解
网络营销推广技术.技巧深度解密(网络项目三)指南: 1.本文档适合零基础以及互联网营销推广工作者,主要讲解关于抖音起名项目的问题. 2.原创版权文档,任何抄袭或者全部.部分模仿都是侵权行为. 3.敬畏 ...
HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序员表白系列 ...
抖音怎么在电脑上看_抖音电脑直播权限怎么开通？抖音直播伴侣怎么操作？一文全解...
我们都知道,在这个全民直播的时代,只需要一部手机就能随时随地开直播. 然而很多人在直播时都会遇到这样的问题: 手机直播画面不清晰:网速不给力,直播间人一多就卡出马赛克:手机硬件不够好,声音画面不同步. ...
走，去抖音上发财！抖音承诺未来一年要帮一千万创作者赚到钱
今天,抖音宣布推出"创作者成长计划",在未来一年,要帮助一千万名创作者在抖音赚到钱. 具体怎么做,抖音方面给出的回答如下: 首先是流量支持.平台将优化提升关注流量.本地流量的权重占 ...
ppt制作流行的“抖音故障风”字体教程
哈喽,大家好,今天教大家制作抖音故障风文字. 抖音作为如今最火的社交媒体软件之一,抖音的Logo也曾给大家留下过非常深刻的印象.这一个小小的音符Logo,配上抖音特有的风格,看上去丝毫不单调且别有韵味 ...
在苹果M1芯片的Mac上怎样安装抖音、微信？
苹果M1支持iOS应用安装,但是有的开发者不愿意将移动端应用直接开放给Mac用户,于是抖音.微信.美图秀秀等暂时都用不了,那么有没有办法自己弄ipa来安装呢?一起来看看吧! 1.Mac端安装iMazi ...
AutoJs Pro 7.0.4-1 实战教程---史上最全抖音极速版
抖音极速版邀请码: 896357244 看文章加关注点分享都不用...加下邀请码就好. 史上最全面得抖音极速版实战代码分享: 1.自动滑动 2.自动签到 3.自动点赞 4.自动评论 5.曲线直线滑动 ...

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

一、效果：

二、关于代码：

CSS/demo.css代码：

JS/demo.js代码：

index.html代码：

三、源码完整版地址：

前端DEMO：网络上流行的抖音罗盘相关推荐

最新文章

热门文章