昨天朋友发我一个罗盘时钟代码，让我修改。现在呈现源代码：
免费下载：https://download.csdn.net/download/hzxhxyj1/88584401?spm=1001.2014.3001.5501
<!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">
<title>罗盘时钟</title>
<style>
body{
background-color: #333;
}
#clock {
margin-top: 300px;
}
.label{
display:inline-block;
text-align: center;
font-size:10px;
transition:left 1s,top 1s;
transform-origin: 0 0;
width: 50px;
}
.out{
width: 100px;
height: 400px;
line-height: 100px;
background-color: #333;
color: transparent;
font-size: 100px;
position: absolute;
top: 50%;
transform: translate(-10%,-50%);
}
</style>
</head>
<body>
<div id="clock"></div>
<div class="out">
当前时间
</div>
</body>
<script>
let weekText = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
let monthText = [];
for(let i=0;i<12;i++){
if(i<9){
let j=i+1
monthText[i]='0'+j+'月';
}else{
monthText[i]=i+1+'月';
}
}
let dayText = [];
for(let i=0;i<31;i++){
if(i<9){
let j=i+1
dayText[i]='0'+j+'号';
}else{
dayText[i]=i+1+'号';
}
}
let hourText = [];
for(let i=0;i<24;i++){
if(i<10){
hourText[i]='0'+i+'点';
}else{
hourText[i]=i+'点';
}
}
let minuteText = [];
for(let i=0;i<60;i++){
if(i<10){
minuteText[i]='0'+i+'分';
}else{
minuteText[i]=i+'分';
}
}
let secondText = [];
for(let i=0;i<60;i++){
if(i<9){
let j=i+1
secondText[i]='0'+j+'s';
}else{
secondText[i]=i+1+'s';
}
}
let monthList = [];
let dayList = [];
let weekList = [];
let hourList = [];
let minuteList = [];
let secondList = [];
let timeTextSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondText, secondList]
];
let isRotating = false;
let clock;
window.onload = function () {
init();
setInterval(function () {
runTime();
}, 100);
locateCurrent();
setTimeout(function () {
toRotate();
}, 100);
}
function init() {
clock = document.getElementById('clock');
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
let temp = createLabel(timeTextSet[i][0][j]);
clock.appendChild(temp);
timeTextSet[i][1].push(temp);
}
}
}
function createLabel(text) {
let div = document.createElement('div');
div.classList.add('label');
div.innerText = text;
return div;
}
function runTime()
{
let now = new Date();
let month = now.getMonth();
let day = now.getDate();
let week = now.getDay();
let hour = now.getHours();
let minute = now.getMinutes();
let seconds = now.getSeconds();
initStyle();
let nowValue = [month, day - 1, week, hour, minute, seconds];
for (let i = 0; i < nowValue.length; i++) {
let num = nowValue[i];
timeTextSet[i][1][num].style.color = 'red';
timeTextSet[i][1][num].style.width = '65px';
timeTextSet[i][1][num].style.borderBottom = '1px solid red';
}
if (isRotating)
{
let widthMid = document.body.clientWidth /1.6
let heightMid = document.body.clientHeight/1.6
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][0].length; j++) {
let r = (i + 1) * 35 + 30 * i;
let deg = 360 / timeTextSet[i][1].length * (j - nowValue[i]) ;
let x = r * Math.sin(deg * Math.PI / 180) + widthMid;
let y = heightMid - r*Math.cos(deg * Math.PI / 180);
let temp = timeTextSet[i][1][j];
temp.style.transform = 'rotate(' + (-90 + deg ) + 'deg)';
temp.style.left = x + 'px';
temp.style.top = y + 'px';
}
}
}
}
function initStyle() {
let label = document.getElementsByClassName('label');
for (let i = 0; i < label.length; i++) {
label[i].style.color = '#eee';
label[i].style.borderBottom = 'none';
label[i].style.width = '30px';
label[i].style.background = 'none';
}
}
function locateCurrent() {
for (let i = 0; i < timeTextSet.length; i++) {
for (let j = 0; j < timeTextSet[i][1].length; j++) {
let tempX = timeTextSet[i][1][j].offsetLeft + "px";
let tempY = timeTextSet[i][1][j].offsetTop + "px";
setTimeout(function () {
timeTextSet[i][1][j].style.position = "absolute";
timeTextSet[i][1][j].style.left = tempX;
timeTextSet[i][1][j].style.top = tempY;
}, 50);
}
}
}
function toRotate() {
isRotating = true;
clock.style.transform = "rotate(90deg)";
}
var out=document.querySelector('.out')
out.onclick=function(){
window.open('vitaminMain.html');
}
</script>
</html>
