<template>
<div class="">
时间{{ time }}
<div class="base1">
<div class="move-to-center line"></div>
<div class="move-to-center line line2"></div>
<div class="move-to-center line line3"></div>
<div class="move-to-center line line4"></div>
<div class="move-to-center line line5"></div>
<div class="move-to-center line line6"></div>
<!--base2用来遮挡line1~6-->
<div class="move-to-center base2"></div>
<!--这里DOM节点有排列顺序要求,center在最上面挡住3个指针~-->
<div class="ptr m-ptr" :style="{ transform: `rotate(${mPtr}deg)` }"></div>
<div class="ptr h-ptr" :style="{ transform: `rotate(${hPtr}deg)` }"></div>
<div class="ptr s-ptr" :style="{ transform: `rotate(${sPtr}deg)` }"></div>
<div class="move-to-center center"></div>
</div>
<div class="time-label">当前时间:{{ time }}</div>
</div>
</template>
<script>
export default {
data() {
return {
timer: '',
time: '',
h: 0,
m: 0,
s: 0,
sPtr: -180,
mPtr: -180,
hPtr: -180
}
},
async created() {
let d = new Date()
let h = d.getHours()
let m = d.getMinutes()
let s = d.getSeconds()
this.h = h >= 10 ? h : `0${h}`
this.m = m >= 10 ? m : `0${m}`
this.s = s >= 10 ? s : `0${s}`
this.sPtr += s * 6
this.mPtr += m * 6 + s * 0.1
this.hPtr += h * 30 + m * 0.5 + s / 120
setInterval(() => {
this.updateTime()
this.updatePtr()
}, 1000)
this.gettoday()
await this.getTime()
},
methods: {
updateTime() {
this.s++
if (this.s === 60) {
this.m++
this.s = 0
}
if (this.m === 60) {
this.h++
this.m = 0
}
if (this.h === 24) {
this.h = 0
}
},
updatePtr() {
this.sPtr += 6
if (this.sPtr > 360) this.sPtr -= 360
this.mPtr += 0.1
if (this.mPtr > 360) this.mPtr -= 360
this.hPtr += 1 / 120
if (this.hPtr > 360) this.hPtr -= 360
},
gettoday() {
let data = new Date()
// 获取时分秒
let h = data.getHours()
let m = data.getMinutes()
let s = data.getSeconds()
if (h < 10) {
h = '0' + h
}
if (m < 10) {
m = '0' + m
}
if (s < 10) {
s = '0' + s
}
this.time = h + ':' + m + ':' + s
},
getTime() {
this.timer = setInterval(() => {
this.gettoday()
}, 1000)
}
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>
<style lang="scss" scoped>
body {
margin: 0;
background-color: wheat;
}
div {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.base1 {
background-color: #ddd;
border: 10px solid #ed6e46;
border-radius: 50%;
width: 300px;
height: 300px;
position: relative;
}
.move-to-center {
position: absolute;
top: 50%;
left: 50%;
}
.center {
--cw: 20px;
--offset: calc(-1 * var(--cw) / 2);
width: var(--cw);
height: var(--cw);
border-radius: 50%;
background-color: #ed6e46;
margin-left: var(--offset);
margin-top: var(--offset);
}
.base2 {
--shade-w: 260px;
--offset: calc(-1 * var(--shade-w) / 2);
width: var(--shade-w);
height: var(--shade-w);
border-radius: 50%;
background-color: #ddd;
margin-left: var(--offset);
margin-top: var(--offset);
}
.line {
width: 5px;
height: 280px;
background-color: gray;
margin-left: -2.5px;
margin-top: -140px;
}
.line2 {
transform: rotate(30deg);
}
.line3 {
transform: rotate(60deg);
}
.line4 {
transform: rotate(90deg);
}
.line5 {
transform: rotate(120deg);
}
.line6 {
transform: rotate(150deg);
}
.ptr {
position: absolute;
top: 50%;
left: 50%;
transform-origin: top;
}
.s-ptr {
background-color: black;
width: 2px;
height: 110px;
margin-left: -1px;
}
.m-ptr {
background-color: #f8b65b;
--w: 8px;
width: var(--w);
height: 90px;
border-radius: calc(var(--w) / 2);
margin-left: calc(-1 * var(--w) / 2);
}
.h-ptr {
background-color: #f8b65b;
--w: 8px;
width: var(--w);
height: 70px;
border-radius: calc(var(--w) / 2);
margin-left: calc(-1 * var(--w) / 2);
}
.time-label {
margin-top: 32px;
}
</style>
vue一个简易时钟
最新推荐文章于 2024-09-06 23:59:38 发布