抖音罗盘-前端小案列

最新推荐文章于 2024-07-08 18:51:22 发布

苏苏少年

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量136

点赞数

分类专栏：罗盘时钟文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57145412/article/details/123382175

版权

罗盘时钟专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!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>

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样式

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)";}

苏苏少年公众号: