用html+css+javascript制作圆形时钟

最新推荐文章于 2021-06-30 18:20:07 发布

weixin_30807779

最新推荐文章于 2021-06-30 18:20:07 发布

阅读量372

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/njzy8856/p/8462027.html

版权

　　制作好的效果如下：

　　表盘、刻度和数字全都是用html+css完成的。

　　html+css代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>圆形时钟</title>
	<style type="text/css">
		#div1{
			width: 500px;
			height: 500px;
			border:1px solid black;
			border-radius: 50%;
			margin: auto;
			position: relative;
		}
		.clockPanel{
			width: 500px;
			border-top: 1px solid black;
			position: absolute;
			margin-top: 250px;
			transform: rotate(0deg);
		}
		#div2{
		width: 470px;
		height: 470px;
		border-radius: 50%;	
		background-color: white;
		position: absolute;
		margin: 15px;
		}
		.shuzi{
		width: 10px;
		height: 470px;
		position: absolute;
		margin-left: 245px;
		margin-top: 15px;
		}
		#div3{
			width: 30px;
			height: 30px;
			border-radius: 50%;
			background-color: blue;
			position: absolute;
			margin: 235px;
		}
		#hourPoint{
			height: 300px;
			position: absolute;
			margin-left: 250px;
			margin-top: 100px;
			transform: (0deg);

		}		
		#hourPoint div{
			height: 150px;
			border-left: 8px solid black;
			position: absolute;
			margin-left: -8px;
			transform: (0deg);

		}
		#minutePoint {
			height: 360px;
			position: absolute;
			margin-left: 250px;
			margin-top: 70px;
			transform: rotate(0deg);

		}
		#minutePoint div{
			height: 180px;
	 		border-left: 5px solid black;
			position: absolute;
			margin-left: -5px;
			transform: rotate(0deg);

		}
		#secondPoint{
			height: 420px;		
			position: absolute;
			margin-left: 250px;
			margin-top: 40px;
			transform: rotate(0deg);

		}
		#secondPoint div{
			height: 210px;
			border-left: 2px solid black;
			position: absolute;
			margin-left: -2px;
		}
		p{
			font: 20px bold;
		}
	</style>
</head>
<body>
<div id="div1">
	<div id="div2"></div>
	<div class="shuzi"><p>12</p><p style="margin-top: 390px;">6</p></div>
	<div class="shuzi" style="transform: rotate(30deg);"><p style="transform: rotate(-30deg);">1</p><p style="margin-top: 390px; transform: rotate(-30deg);">7</p></div>
	<div class="shuzi" style="transform: rotate(60deg);"><p style="transform: rotate(-60deg);">2</p><p style="margin-top: 390px; transform: rotate(-60deg);">8</p></div>
	<div class="shuzi" style="transform: rotate(90deg);"><p style="transform: rotate(-90deg);">3</p><p style="margin-top: 390px;transform: rotate(-90deg);">9</p></div>
	<div class="shuzi" style="transform: rotate(120deg);"><p style="transform: rotate(-120deg);">4</p><p style="margin-top: 390px;transform: rotate(-120deg);">10</p></div>
	<div class="shuzi" style="transform: rotate(150deg);"><p style="transform: rotate(-150deg);">5</p><p style="margin-top: 395px;transform: rotate(-150deg);">11</p></div>
	<div id="hourPoint">
		<div></div>
	</div>
	<div id="minutePoint">
		<div></div>
	</div>
	<div id="secondPoint">
		<div></div>
	</div>
	<div id="div3"></div>
</div>
<script type="text/javascript" src="clock.js"></script>
</body>
</html>

　　js代码如下:

var minute;
var hour;
var second;
function createClock(){
	var circle=document.getElementById("div1");
	var smallcircle=document.getElementById("div2");
	var angle=0;
	for(var i=0;i<30;i++){
		var clockPanel=document.createElement("div");
		//clockPanel.setAttribute("width","500px");
		//clockPanel.style.borderTop="1px solid black"
		clockPanel.setAttribute("class","clockPanel");
		circle.appendChild(clockPanel); 
		circle.insertBefore(clockPanel,smallcircle);   
		clockPanel.style.transform="rotate("+angle+"deg)";
		angle+=6; 
		if(i%5==0){
			clockPanel.style.border="2px solid black";
		}
	}
}

function getDate(){
	 var date=new Date();
	 hour=date.getHours();
	 minute=date.getMinutes();
	 second=date.getSeconds(); 
}
var angle1=6;
var angle2=6;
var angle3=6;
function secondPointFresh(){
	//alert("dhf");
	//alert(secondPoint.style.transform);
	second++;
	if(second==60){
		second=0;
		minute++;
		if(minute==60){
			minute=0;
			hour++;
			if(hour==12)
				hour=0;
        }
	}
	angle1=second*6;
	var secondPoint=document.getElementById("secondPoint");
	secondPoint.style.transform="rotate("+angle1+"deg)";
	angle2=(minute*6);
	var minutePoint=document.getElementById("minutePoint");
	minutePoint.style.transform="rotate("+angle2+"deg)";
	angle3=((hour%12)*30)+(minute*0.5);
	var hourPoint=document.getElementById("hourPoint");
	hourPoint.style.transform="rotate("+angle3+"deg)";
}

createClock();
getDate();
secondPointFresh();
setInterval("secondPointFresh()",1000);

转载于:https://www.cnblogs.com/njzy8856/p/8462027.html