用css和js做一个时钟

最新推荐文章于 2024-08-03 10:37:55 发布

Zhu Xiaopi

最新推荐文章于 2024-08-03 10:37:55 发布

阅读量103

点赞数

分类专栏： css特效集合

本文链接：https://blog.csdn.net/qq_46063425/article/details/119854859

版权

css特效集合专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍如何利用HTML、CSS和JavaScript技术制作一个时钟。通过HTML构建基本结构，CSS用于样式设计，特别是使用伪元素创建指针效果，JavaScript实现时间的实时更新和动画效果。

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

时钟

效果图：
在这里插入图片描述

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>时钟</title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>
		<div class="clock">
			<div class="center-nut"></div>
			<div class="center-nut2"></div>
			<div class="indicators">
				<div>
					<p>1</p>
				</div>
				<div>
					<p>2</p>
				</div>
				<div>
					<p>3</p>
				</div>
				<div>
					<p>4</p>
				</div>
				<div>
					<p>5</p>
				</div>
				<div>
					<p>6</p>
				</div>
				<div>
					<p>7</p>
				</div>
				<div>
					<p>8</p>
				</div>
				<div>
					<p>9</p>
				</div>
				<div>
					<p>10</p>
				</div>
				<div>
					<p>11</p>
				</div>
				<div>
					<p>12</p>
				</div>
			</div>
			<div class="sec-hand">
				<div class="sec"></div>
			</div>
			<div class="min-hand">
				<div class="min"></div>
			</div>
			<div class="hour-hand">
				<div class="hour"></div>
			</div>
		</div>
		<script type="text/javascript">
			const sec = document.querySelector('.sec')
			const min = document.querySelector('.min')
			const hour = document.querySelector('.hour')
			setInterval(() => {
				let time = new Date();
				let secs = time.getSeconds()*6;
				let mins = time.getMinutes()*6;
				let hours = time.getHours()*30 ;
				sec.style.transform = `rotateZ(${secs}deg)`;
				min.style.transform = `rotateZ(${mins}deg)`;
				hour.style.transform = `rotateZ(${hours+(mins/12)}deg)`;
		
			}, 1000)
		</script>
	</body>
</html>

css代码:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;

}

body {
	display: grid;
	place-items: center;
	background: #dde1e7;
	text-align: center;
}

.clock {
	display: flex;
	background-color: #EDEDEDe7;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 250px;
	width: 250px;
	border-radius: 50%;
	box-shadow: -3px -3px 7px #FFFFFF73,
		3px 3px 5px rgba(94, 104, 121, 0.288);
}

.clock::before {
	position: absolute;
	content: '';
	height: 220px;
	width: 220px;
	background-color: #DDE1E7;
	border-radius: 50%;
	box-shadow: inset -3px -3px 7px #FFFFFF73,
		inset 3px 3px 5px rgba(94, 104, 121, 0.288);
}

.clock::after {
	position: absolute;
	content: '';
	height: 120px;
	width: 120px;
	background-color: #DDE1E7;
	border-radius: 50%;
	box-shadow: -1px -1px 5px #FFFFFF73,
		1px 1px 3px rgba(94, 104, 121, 0.288);
}

.clock .center-nut {
	position: absolute;
	height: 15px;
	width: 15px;
	background-color: #404040;
	z-index: 2;
	border-radius: 50%;
}

.clock .center-nut2 {
	position: absolute;
	height: 9px;
	width: 9px;
	background-color: #3498db;
	z-index: 15;
	border-radius: 50%;
}

.indicators div {
	position: absolute;
	width: 2px;
	height: 5px;
	background: #404040;
	transform: rotate(calc(30deg * var(--n))) translateY(-100px);
	
}
.indicators div p{
	display: block;
	position: absolute;
	left: -5px;
	top: 5px;
}
.indicators div:nth-child(1) {
	--n: 1;
}

.indicators div:nth-child(2) {
	--n: 2;
}

.indicators div:nth-child(3) {
	--n: 3;
	background-color: #3498DB;
}

.indicators div:nth-child(4) {
	--n: 4;
}

.indicators div:nth-child(5) {
	--n: 5;
}

.indicators div:nth-child(6) {
	--n: 6;
	background-color: #3498DB;
}

.indicators div:nth-child(7) {
	--n: 7;
}

.indicators div:nth-child(8) {
	--n: 8;
}

.indicators div:nth-child(9) {
	--n: 9;
	background-color: #3498DB;
}

.indicators div:nth-child(10) {
	--n: 10;
}

.indicators div:nth-child(11) {
	--n: 11;
}

.indicators div:nth-child(12) {
	--n: 12;
	background-color: #3498DB;
}

.sec-hand,
.min-hand,
.hour-hand {
	position: absolute;

}

.min,
.min-hand {
	height: 140px;
	width: 140px;
	z-index: 5;
}

.sec,
.sec-hand {
	height: 180px;
	width: 180px;
	z-index: 6;
}

.hour,
.hour-hand {
	height: 110px;
	width: 110px;
	z-index: 4;
}

.sec,
.min,
.hour {
	display: flex;
	justify-content: center;
	position: absolute;
}

.sec::before {
	position: absolute;
	content: "";
	height: 110px;
	width: 3px;
	background-color: #3498DB;
}
.sec::after{
	position: absolute;
	content: "";
	height: 35px;
	width: 7px;
	background-color: #3498DB;
	top: 105px;
	border-radius: 5px;
}
.min::before {
	position: absolute;
	content: "";
	width: 1px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 60px solid #e95949;
	top: -15px;
}
.min::after{
	position: absolute;
	content: "";
	width: 3px;
	border-left: 2x solid transparent;
	border-right: 2px solid transparent;
	border-top: 30px solid #e95949;
	top: 40px;
}

.hour::before {
	position: absolute;
	content: "";
	width: 1px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-bottom: 35px solid #303030;

}
.hour::after{
	position: absolute;
	content: "";
	width: 3px;
	border-left: 2px solid transparent;
	border-right: 2px solid transparent;
	border-top: 25px solid #303030;
	top: 35px;
}

border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-bottom: 35px solid #303030;

}
.hour::after{
position: absolute;
content: “”;
width: 3px;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: 25px solid #303030;
top: 35px;
}