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

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;
	}
}
相关推荐
半点寒12W3 分钟前
uniapp全局状态管理实现方案
前端
Vertira4 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
牧杉-惊蛰6 分钟前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
PeterJXL38 分钟前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端
巴别塔的饿灵1 小时前
Webpack[TBC]
前端