直线围绕中心点旋转(类似时钟)

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;
	}
}
相关推荐
小桥风满袖2 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang13 分钟前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户730870117930814 分钟前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
李重楼15 分钟前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu18 分钟前
全屏滚动网站PC端自适应方案
前端
RoyLin25 分钟前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者28 分钟前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
brzhang34 分钟前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构
lecepin2 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒2 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端