罗盘时钟——使用html，js，css编写

最新推荐文章于 2024-08-13 09:00:00 发布

layroy

最新推荐文章于 2024-08-13 09:00:00 发布

阅读量1w

点赞数 7

分类专栏： HTML 文章标签： css html

本文链接：https://blog.csdn.net/m0_57202083/article/details/120079583

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

该博客介绍了如何使用HTML、CSS和JavaScript实现一个动态时钟，时钟显示包括月份、日期、星期、小时、分钟和秒数，并通过CSS3实现了时钟指针的旋转动画效果。此外，还包含了初始化、时间更新和位置变换的详细步骤。

摘要由CSDN通过智能技术生成


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

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%;
}

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

效果：