<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 * 6this.mPtr += m * 6 + s * 0.1this.hPtr += h * 30 + m * 0.5 + s / 120setInterval(() => {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 += 6if (this.sPtr > 360) this.sPtr -= 360this.mPtr += 0.1if (this.mPtr > 360) this.mPtr -= 360this.hPtr += 1 / 120if (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>