jQuery实现网页圆盘钟表

最新推荐文章于 2023-01-21 18:53:20 发布

社会人王某

最新推荐文章于 2023-01-21 18:53:20 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/key1haha_/article/details/102699069

版权

最近学的js和jQuery做一个圆盘；

上图：
在这里插入图片描述
1.html部分：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>jQuery圆盘时钟</title>
		<link href="css/coick.css" rel="stylesheet"/>
		<script src="js/jQuery.js"></script>
		<script src="js/coick.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>

2.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;
}

js代码：

在这里插入图片描述

扫描二维码添加成功回复“滴滴” 即可免费获得

社会人王某

关注

0
点赞
踩
1

收藏

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

最近学的js和jQuery做一个圆盘；上图：1.html部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery圆盘时钟</title> <link href="css/coick.css" r...
复制链接

扫一扫