文章来源地址https://www.toymoban.com/news/detail-845176.html
<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;
}
}
文章来源：https://www.toymoban.com/news/detail-845176.html
到了这里，关于直线围绕中心点旋转（类似时钟）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
