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>