html制作简易时钟

最新推荐文章于 2024-04-09 14:02:54 发布

Fiskychen

最新推荐文章于 2024-04-09 14:02:54 发布

阅读量3.2k

点赞数 2

文章标签： javascript css html5

本文链接：https://blog.csdn.net/Fiskychen/article/details/123946907

版权

新人学习，制作html页面时钟表盘，实现调用时间，

CSS部分代码如下

html,
body{
	background-color: #000000;
}
.fix-center{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
/* 风暴烈酒习作 */
.clock-wrapper{
	width: 680px;
	height: 680px;
	background-color: #aa55ff;
	border-radius: 50%;
}
.time-wrap{
	color: #005500;
	font-size: 54px;
	font-weight: bold;
}
.dial-time{
	position: absolute;
}
.dial-time:nth-child(1){
	top: 15px;
	left: 50%;
	margin-left: -15px;
}
.dial-time:nth-child(2){
	right: 40px;
	top: 50%;
	margin-left: -15px;
}
.dial-time:nth-child(3){
	bottom: 15px;
	left: 50%;
	margin-left: -15px;
}
.dial-time:nth-child(4){
	left: 40px;
	top: 50%;
	margin-left: -15px;
}
.line-wrap{
	width: 440px;
	height: 27.5rem;
	border-radius: 50%;
	box-shadow: 0 0 10px 4px #efefef; 
}
.dial-line{
	position: absolute;
	left: 53%;
}
.hour-line{
	width:15px;
	height: 200px;
	margin-top: 80px;
	margin-left: -7px;
	background-color: #353535;
	transform-origin: 50% 75%;
}
.minute-line{
	width:10px;
	height: 300px;
	margin-top: -20px;
	margin-left: -5px;
	background-color: #353535;
	transform-origin: 50% 83%;
}
.second-line{
	width:5px;
	height: 260px;
	margin-top: 20px;
	margin-left: -2px;
	background-color: red;
	transform-origin: 50% 80%;
}
.line-wrap::after{
	position: absolute;
	top: 1.25rem;
	right: 0;
	bottom: 0;
    left: 27px;
	width: 40px;
	height: 40px;
	margin: auto;
	background-color: #ff0000;
	border-radius: 50%;
	content: '';
}

javascript部分代码如下：

/* 表盘指针 */
let hourLine = document.querySelector('.hour-line'),
	minuteLine = document.querySelector('.minute-line'),
	secondLine = document.querySelector('.second-line');

function setTime(){
	const date = new Date();
	let s = date.getSeconds(),
	m = date.getMinutes() + s / 60,
	h = date.getHours() + m / 60;
/* 风暴烈酒习作 */
	hourLine.style.transform = `rotate(${h*30}deg)`;
	minuteLine.style.transform = `rotate(${m*6}deg)`;
	secondLine.style.transform = `rotate(${s*6}deg)`;
}
setTime();
setInterval(setTime,1000);

HMTL部分代码如下：

<!DOCTYPE html>
<html lang="en">
	<!-- 陈.风暴烈酒学习制作 -->
	<head>
		<meta charset="utf-8" />
		<meta http-equiv='X-UA-Compatible' content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" >
		<title>document</title>
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="clock-wrapper fix-center">
	<!-- 表盘数字 -->
	<div class="time-wrap">
		<div class="dial-time">12</div>
		<div class="dial-time">3</div>
		<div class="dial-time">6</div>
		<div class="dial-time">9</div>
		</div>
		
	</div>
	<!-- 表盘指针 -->
	<div class="line-wrap fix-center">
		<div class="dial-line hour-line"></div>
		<div class="dial-line minute-line"></div>
		<div class="dial-line second-line"></div>
		
	</div>
	<script src='js/index1.js' type="text/javascript" charset="utf-8"></script>
	</body>
</html>

Fiskychen

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
html制作简易时钟

新人学习，制作html页面时钟表盘，实现调用时间，CSS部分代码如下html,body{ background-color: #000000;}.fix-center{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}/* 风暴烈酒习作 */.clock-wrapper{ width: 680px; height: 680px; background-col...
复制链接

扫一扫