vue实现带日期星期数字时钟代码

最新推荐文章于 2024-08-21 09:10:49 发布

逍遥596607010

最新推荐文章于 2024-08-21 09:10:49 发布

阅读量1.9k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u013373006/article/details/82464004

版权

js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

<template >

    <view >
        <view>{{date}}</view>
		<view>{{time}}</view>
    </view>

</template>

<script>
    import service from '../../service.js';
    
    
    export default {
		
        data:{
            date:'',
			timerID:'',
            time:'',
			week:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
            item:''
        },
        mounted:function(){
			this.updateTime();
			this.timerID = setInterval(this.updateTime, 1000);
        },
        created:function(){

        },

        onLoad:function(option){
            var d=JSON.parse(option.data);
            this.item=d;
           
        },
        methods:{
            updateTime:function(){
                var cd = new Date();
                this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
                this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth()+1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];

            },
            zeroPadding:function(num, digit){

                var zero = '';
                for(var i = 0; i < digit; i++) {
                    zero += '0';
                }
                return (zero + num).slice(-digit);
            }

        }

    }
</script>

<style>

</style>