vue2实现简易时钟效果

2024-04-02 19:04:59 861人浏览独家记忆

摘要

本文实例为大家分享了Vue2实现简易时钟效果的具体代码，供大家参考，具体内容如下 1.vue2+纯CSS实现预览效果： 2.代码如下： <template>

本文实例为大家分享了Vue2实现简易时钟效果的具体代码，供大家参考，具体内容如下

1.vue2+纯CSS实现

预览效果：

2.代码如下：

<template>
    <div class="main">
        <div class="time">
            <div class="hour_wrap">
                <div class="hour_item" :style="{transfORM:'translate(-50%,-50%)'+'rotate('+30*(index+1)+'deg)'}" v-for="(item,index) in 12" :key="index">
                   
                    {{index+1}}
                     <div class="ke"></div>
                </div>
            </div>
            <div class="minute_wrap">
                <div class="minute_item" :style="{transform:'translate(-50%,-50%)'+'rotate('+6*(index+1)+'deg)'}" v-for="                        (item,index) in 60" :key="index">
                     <div class="ke"></div>
                </div>
            </div>
            <div class="hour_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+30*hour+'deg)'}"></div>
            <div class="minute_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+6*minute+'deg)'}"></div>
            <div class="second_hand" :style="{transform:'translate(-50%,-100%)'+'rotate('+6*second+'deg)'}"></div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            interval:{},
            date:'',
            hour:0,
            minute:0,
            second:0,

        }
    },
    mounted(){
        this.interval = setInterval(()=>{
            this.date = this.getDate();
            this.hour = this.date.toString().split(' ')[1].split(':')[0];
            this.minute = this.date.toString().split(' ')[1].split(':')[1];
            this.second = this.date.toString().split(' ')[1].split(':')[2];
        },1000);
    },
    beforeDestroy(){
        clearInterval(this.interval);
    },
    methods:{
       getDate(time,format){
        var tf = function (i) {
            return (i < 10 ? '0' : '') + i
        };
        var now = time?new Date(time):new Date();
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        if(format=='yyyy-mm-dd HH:mm:ss'){
          return year + "-" + tf(month) + "-" + tf(date)+' '+hour+':'+tf(minute)+':'+tf(second);
        }else{
          return year + "/" + tf(month) + "/" + tf(date)+' '+hour+':'+tf(minute)+':'+tf(second);
        }
    }
    }
}
</script>
<style scoped lang="less">
.time{
    border-radius:50%;
    width: 140px;
    height: 140px;
    border: 1px solid #000;
    position: relative;
    .hour_wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        .hour_item{
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 12px;
            font-size: 12px;
            text-align: center;
            transform-origin: 6px 70px; 
            //transform: translate(-50%,-50%);
            .ke{
                width: 3px;
                height: 8px;
                background-color: #000;
                margin: 0 auto;
            }
        }
    }
    .minute_wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        .minute_item{
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 10px;
            font-size: 12px;
            text-align: center;
            transform-origin: 5px 70px; 
            //transform: translate(-50%,-50%);
            .ke{
                width: 2px;
                height: 4px;
                background-color: #000;
                margin: 0 auto;
                margin-top: 10px;
            }
        }
    }
    .hour_hand{
        width: 3px;
        height: 30px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 1.5px 30px;
    }
    .minute_hand{
        width: 2px;
        height: 50px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 1px 50px;
    }
    .second_hand{
        width: 1px;
        height: 60px;
        background-color: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: 0.5px 60px;
    }
}

</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue2实现简易时钟效果

本文链接: https://www.lsjlt.com/news/166362.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341