直线围绕中心点旋转（类似时钟）

小叮当仁不让

已于 2024-04-08 15:35:24 修改

阅读量399

点赞数 2

分类专栏： HTML/CSS 文章标签： css css3 前端

于 2024-04-08 15:34:04 首次发布

本文链接：https://blog.csdn.net/qq_44971069/article/details/137511221

版权

HTML/CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了如何在网页中使用JavaScript操作DOM，实现在页面上显示动态变化的秒针动画。作者展示了如何设置定时器、获取当前时间并计算秒针角度，以及应用CSS样式来创建旋转效果。

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

在这里插入图片描述

<view class="circleBoxSecond">
	<view class="circleBox">
		<div id="clock">
			<div class="hand second-hand"></div>
		</div>
	</view>
</view>

onLoad() {		
	setTimeout(() => {
		this.secondHand = document.querySelector('.second-hand');
	}, 500)
	},
onShow() {
	setTimeout(() => {
		this.intervalId = setInterval(this.setDate, 500); // 每1000毫秒调用一次yourMethod方法
	}, 1000)
},
onHide() {
	// 页面隐藏时清除定时器
	clearInterval(this.intervalId);
},

setDate() {
	const now = new Date();
	const seconds = now.getSeconds();
	const secondsDegrees = ((seconds / 60) * 360) + 90;
	this.secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
},

//style
.circleBoxSecond {
		width: 280rpx;
		height: 280rpx;
		border-radius: 50%;
		border: 1px solid green;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f2f9f3;
	}

.circleBox {
	// margin: 20rpx 0;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	border: 1px solid green;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ebf5ec;

	#clock {
		width: 120rpx;
		height: 120rpx;
		border: 1px solid green;
		border-radius: 50%;
		position: relative;
		background-color: #fff;
	}

	.hand {
		width: 50%;
		height: 1px;
		background-color: green;
		position: absolute;
		top: 50%;
		transform-origin: right center;
		transform: rotate(90deg);
	}

	.second-hand {
		height: 2rpx;
		background-color: green;
	}
}