JS+jQuery实现网页圆盘钟表

最新推荐文章于 2022-07-12 10:45:29 发布

南宫廿贰

最新推荐文章于 2022-07-12 10:45:29 发布

阅读量960

点赞数 2

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43330884/article/details/102689619

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

用最近学的js和jQuery做一个圆盘钟表，这个还是可以的若有不足之处请大佬指正一下：
效果图如下：
在这里插入图片描述

clock.html:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>JS+jQuery圆盘时钟</title>
		<link href="css/clock.css" rel="stylesheet"/>
		<script src="js/jQuery.js"></script>
		<script src="js/clock.js"></script>
	</head>
	<body>
		<div class="box" id="clock">
			<!-- 钟表原点 -->
			<div class="origin"></div>
			<!-- 1——12 -->
			<div class="dot_box">
				<div class="dot">6</div>
				<div class="dot">5</div>
				<div class="dot">4</div>
				<div class="dot">3</div>
				<div class="dot">2</div>
				<div class="dot">1</div>
				<div class="dot">12</div>
				<div class="dot">11</div>
				<div class="dot">10</div>
				<div class="dot">9</div>
				<div class="dot">8</div>
				<div class="dot">7</div>
			</div>
			<!-- 时、分、秒针 -->
			<div class="pointer hour" id="hour"></div>
			<div class="pointer minute" id="minute"></div>
			<div class="pointer second" id="second"></div>
		</div>	
	</body>
</html>

clock.css:

body,
div,
p {
	font-family: 'Microsoft Yahei';
	font-size: 14px;
}

.box {
	width: 400px;
	height: 400px;
	border: 10px solid #000000;
	margin: 30px auto;
	border-radius: 50%;
	box-shadow: 0px 0px 20px 3px #444 inset;
	position: relative;
}

.dot_box {
	width: inherit;
	height: inherit;
}

.dot {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 22px;
	position: absolute;
}

/*钟表原点*/
.origin {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ff0000;
	top: 190px;
	left: 190px;
	position: absolute;
}

/* 指针 */
.pointer {
	position: absolute;
	position: absolute;
	z-index: 20;
}

/*时分秒*/
.hour {
	width: 100px;
	height: 4px;
	top: 198px;
	left: 200px;
	background-color: #000;
	border-radius: 2px;
	transform-origin: 0 50%;
	box-shadow: 1px -3px 8px 3px #aaa;
}

.minute {
	width: 130px;
	height: 2px;
	top: 199px;
	left: 190px;
	background-color: #000;
	transform-origin: 7.692% 50%;
	box-shadow: 1px -3px 8px 1px #aaa;
}

.second {
	width: 170px;
	height: 1px;
	top: 199.5px;
	left: 180px;
	background-color: #f60;
	transform-origin: 11.765% 50%;
	box-shadow: 1px -3px 7px 1px #bbb;
}

clock.js:

$(function() {
	var clock = document.getElementById("clock");

	function initRadian() {
		//12个数字的位置设置
		var radius = 180; //圆半径
		var radian = 360 / $(".dot").length; //每个div对应的弧度数
		//每一个dot对应的弧度;
		var radians = radian * Math.PI / 180;
		$(".dot").each(function(index) {
			$(this).css({
				"left": 180 + Math.sin((radians * index)) * radius,
				"top": 180 + Math.cos((radians * index)) * radius
			});
		});
	}
	initRadian(); //回调函数
	//设置动态时间
	function setTime() {
		var date = new Date();
		//获取时分秒
		var hours = date.getHours(),
			minutes = date.getMinutes(),
			seconds = date.getSeconds(),
			date = date.getDate();
		//时分秒针设置
		var hourRotate = (hours * 30 - 90) + (Math.floor(minutes / 12) * 6);
		hour.style.transform = 'rotate(' + hourRotate + 'deg)';
		minute.style.transform = 'rotate(' + (minutes * 6 - 90) + 'deg)';
		second.style.transform = 'rotate(' + (seconds * 6 - 90) + 'deg)';
	}
	//设置时间间隔
	setInterval(setTime, 1000);
});

南宫廿贰

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS+jQuery实现网页圆盘钟表

用最近学的js和jQuery做一个圆盘钟表，这个还是可以的若有不足之处请大佬指正一下：效果图如下：clock.html:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>JS+jQuery圆盘时钟</title> ...
复制链接

扫一扫