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

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

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

javascript 复制代码

//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;
	}
}