vue的实现抖音闹钟

闹钟"/>

vue的实现抖音闹钟

早上没有事，来写一个抖音时钟

<template><!-- 抖音闹钟 --><div id="clock"><div class="lock-content"><hr class="line"><ul class="hour" :style="{transform: 'rotate(' + hourDeg + 'deg)'}"><li v-for="(item, index) in time1" :key="index" :style="{transform: 'rotate(' + (-index * 15) + 'deg)'}">{{item}}时</li></ul><ul class="minute" :style="{transform: 'rotate(' + minuteDeg + 'deg)'}"><li v-for="(item, index) in time2" :key="index" :style="{transform: 'rotate(' + (-index * 6) + 'deg)'}">{{item}}分</li></ul><ul class="second" :style="{transform: 'rotate(' + secondDeg + 'deg)'}"><li v-for="(item, index) in time2" :key="index" :style="{transform: 'rotate(' + (-index * 6) + 'deg)'}">{{item}}秒</li></ul></div></div>
</template>

<script>
export default {name: 'clock',data() {return {time1: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九","二十", "二十一", "二十二", "二十三", "二十四"],time2: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十","十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九","二十", "二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九","三十", "三十一", "三十二", "三十三", "三十四", "三十五", "三十六", "三十七", "三十八", "三十九","四十", "四十一", "四十二", "四十三", "四十四", "四十五", "四十六", "四十七", "四十八", "四十九","五十", "五十一", "五十二", "五十三", "五十四", "五十五", "五十六", "五十七", "五十八", "五十九","六十"],hourDeg: 0,minuteDeg: 0,secondDeg: 0,clearTime: null}},mounted() {this.clearTime = setInterval(() => {this.init();}, 1000);},methods: {init() {let time = new Date();let year = time.getFullYear();let month = time.getMonth() + 1;let date = time.getDate();let hours = time.getHours();if (hours < 10) {hours = 0 + hours;}let minute = time.getMinutes();if (minute < 10) {minute = 0 + minute;}let second = time.getSeconds();if (second < 10) {second = 0 + second;}this.hourDeg = this.handleTime(hours, 15);this.minuteDeg = this.handleTime(minute, 6);this.secondDeg = this.handleTime(second, 6);},handleTime(type, interval) {let deg = 0;if (type == 0) {deg= 0} else if (type == 1){deg= 0} else {deg = (type -1) * interval}return deg}},destroyed() {clearInterval(this.clearTime);}
}
</script>

<style lang="less" scoped>#clock {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;margin: auto;clear: both;padding:0;font-size: 14px;background-color: #fff;.lock-content {position: relative;width: 700px;height: 700px;}.line {width:350px;height: 2px;position:absolute;top:368px;right:0;background-color: red;}ul,li{list-style: none;}.hour{position: absolute;width:320px;height:20px;top:340px;left:190px;padding:0;li{position: absolute;width:100%;right:0;top:0;div{float:right;width:90px;text-align: right;}}}.minute{position: absolute;width:520px;height:20px;top:340px;left:90px;padding:0;li{position: absolute;width:100%;right:0;top:0;div{float:right;width:90px;text-align: right;}}}.second{position: absolute;width:680px;height:20px;top:340px;left:10px;padding:0;li{position: absolute;width:100%;right:0;top:0;div{float:right;width:90px;text-align: right;}}}}
</style>