transform实现钟表

效果实现

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>