vue实现钟表
实现思路
在Vue中实现钟表功能，可以通过动态绑定数据结合JavaScript的定时器实现。核心逻辑包括获取当前时间、更新时针/分针/秒针的角度、通过CSS旋转实现指针动画效果。
代码实现
<template>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand" :style="{ transform: `rotate(${hourDegrees}deg)` }"></div>
<div class="hand min-hand" :style="{ transform: `rotate(${minDegrees}deg)` }"></div>
<div class="hand sec-hand" :style="{ transform: `rotate(${secDegrees}deg)` }"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
hourDegrees: 0,
minDegrees: 0,
secDegrees: 0
}
},
mounted() {
this.updateClock()
setInterval(this.updateClock, 1000)
},
methods: {
updateClock() {
const now = new Date()
const seconds = now.getSeconds()
const minutes = now.getMinutes()
const hours = now.getHours() % 12
this.secDegrees = (seconds / 60) * 360 + 90
this.minDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90
this.hourDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90
}
}
}
</script>
<style>
.clock {
width: 300px;
height: 300px;
border: 20px solid #333;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 20px;
}
.clock-face {
position: relative;
width: 100%;
height: 100%;
}
.hand {
width: 50%;
height: 6px;
background: #333;
position: absolute;
top: 50%;
transform-origin: 100%;
transition: all 0.05s;
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.hour-hand {
width: 30%;
left: 20%;
}
.min-hand {
width: 40%;
left: 10%;
}
.sec-hand {
height: 2px;
background: red;
}
</style>关键点说明
通过setInterval每秒调用updateClock方法更新三个指针的角度值。计算角度时需注意：
- 秒针：每秒旋转6度（360/60）
- 分针：每分钟旋转6度，同时考虑秒针的偏移（每分钟增加0.1度）
- 时针：每小时旋转30度（360/12），同时考虑分钟的偏移（每小时增加0.5度）
CSS中transform-origin: 100%让指针从中心点右侧开始旋转，transition-timing-function实现指针的弹性动画效果。初始角度加90度是因为CSS默认0度指向右侧，需要调整为上方起始。
扩展功能
- 添加数字显示：在模板中添加显示当前时间的数字区域
- 添加刻度标记：用v-for渲染12个刻度元素
- 皮肤切换：通过动态class绑定实现不同风格的钟表样式
- 闹钟功能：增加时间比较逻辑触发提醒
