效果实现
1.画出表盘的圆心和指针
<view class="circle-box">
<!-- 圆心 -->
<view class="cir-center"></view>
<!-- 指针 -->
<view class="cir-line-h"></view>
<view class="cir-line-m"></view>
<view class="cir-line-s"></view>
</view>
/*css*/
.circle-box {
width: 400rpx;
height: 400rpx;
border-radius: 50%;
background-color: #fff;
position: relative;
.cir-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10rpx;
height: 10rpx;
border-radius: 50%;
border: 2rpx solid #333;
}
.cir-line-h {
position: absolute;
top: 50%;
left: 50%;
width: 120rpx;
height: 10rpx;
background-color: #333;
transform-origin: 0% 0%;
transform: rotate(0deg) translate(0, -50%);
}
.cir-line-m {
position: absolute;
top: 50%;
left: 50%;
width: 180rpx;
height: 6rpx;
background-color: #333;
transform-origin: 0% 0%;
transform: rotate(-90deg) translate(0, -50%);
}
.cir-line-s {
position: absolute;
top: 50%;
left: 50%;
width: 220rpx;
height: 6rpx;
background-color: #cda369;
transform-origin: 0% 0%;
transform: rotate(-60deg) translate(-40rpx, -50%);
}
}
2.画刻度文字显示(先将文字元素旋转平移到指定位置,再将其文本元素旋转回正面)
<!-- 刻度 -->
<view class="cir-time">
<view class="text">1</view>
</view>
/*css*/
.cir-time {
position: absolute;
top: 50%;
left: 50%;
color: #333;
font-size: 28rpx;
line-height: 40rpx;
width: 40rpx;
height: 40rpx;
transform-origin: 0% 0%;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
transform: rotate(-60deg) translate(calc(170rpx - 50%), -50%);
.text{
transform: rotate(60deg);
}
}
3.显示全部刻度
<!-- 刻度 -->
<view class="cir-time" v-for="(item,index) in 12" :key="index"
:style="{transform: `rotate(calc(30deg*${index+1} - 90deg))
translate(calc(170rpx - 50%),-50%)`}">
<view class="text" :style="{transform: `rotate(calc(-30deg*${index+1} + 90deg)`}">
{{item}}
</view>
</view>
4.效果完成
<template>
<view>
<view class="circle-box">
<!-- 圆心 -->
<view class="cir-center"></view>
<!-- 指针 -->
<view class="cir-line-h"
:style="{transform: `rotate(calc(360deg/12*${hour} + 360deg/12/60*${minute} + 360deg/12/60/60*${second} - 90deg)) translate(0, -50%)`}">
</view>
<view class="cir-line-m"
:style="{transform: `rotate(calc(360deg/60*${minute} + 360deg/60/60*${second} - 90deg)) translate(0, -50%)`}">
</view>
<view class="cir-line-s"
:style="{transform: `rotate(calc(360deg/60*${second} - 90deg)) translate(-40rpx, -50%)`}"></view>
<!-- 刻度 -->
<view class="cir-time" v-for="(item,index) in 12" :key="index"
:style="{transform: `rotate(calc(30deg*${index+1} - 90deg)) translate(calc(170rpx - 50%),-50%)`}">
<view class="text" :style="{transform: `rotate(calc(-30deg*${index+1} + 90deg)`}">{{item}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
time: '10:20:45',
intervalTime: null,
}
},
computed: {
hour() {
return Number(this.time.split(':')[0])
},
minute() {
return Number(this.time.split(':')[1])
},
second() {
return Number(this.time.split(':')[2])
}
},
mounted() {
clearInterval(this.intervalTime)
this.time = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
this.intervalTime = setInterval(() => {
this.time = new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()
}, 1000)
},
destroyed() {
clearInterval(this.intervalTime)
},
methods: {
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #1c1c1e;
padding: 24rpx;
box-sizing: border-box;
}
.circle-box {
width: 400rpx;
height: 400rpx;
border-radius: 50%;
background-color: #fff;
position: relative;
.cir-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10rpx;
height: 10rpx;
border-radius: 50%;
border: 2rpx solid #333;
}
.cir-line-h {
position: absolute;
top: 50%;
left: 50%;
width: 120rpx;
height: 10rpx;
background-color: #333;
transform-origin: 0% 0%;
}
.cir-line-m {
position: absolute;
top: 50%;
left: 50%;
width: 180rpx;
height: 6rpx;
background-color: #333;
transform-origin: 0% 0%;
}
.cir-line-s {
position: absolute;
top: 50%;
left: 50%;
width: 220rpx;
height: 6rpx;
background-color: #cda369;
transform-origin: 0% 0%;
}
.cir-time {
position: absolute;
top: 50%;
left: 50%;
color: #333;
font-size: 28rpx;
line-height: 40rpx;
width: 40rpx;
height: 40rpx;
// border: 2rpx #eee solid;
transform-origin: 0% 0%;
display: flex;
align-items: center;
justify-content: center;
// transform: rotate(-90deg) translate(calc(180rpx - 50%),-50%);
}
}
</style>