前端实时显示日期周时间

大湿骑码

已于 2022-11-16 14:32:44 修改

阅读量542

点赞数

分类专栏： vue js 前端文章标签：前端 javascript 开发语言

于 2022-11-16 14:31:42 首次发布

本文链接：https://blog.csdn.net/yqlnihao/article/details/127884434

版权

前端同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

31 篇文章 0 订阅

订阅专栏

vue

30 篇文章 1 订阅

订阅专栏

![效果](https://img-blog.csdnimg.cn/df0de834ff844d0c885560406365d0e2.png#pic_center)

<div class="time" v-html="allDate"></div>
data() {
        return {
            time: null,
            allDate: ''
        }
    },
    methods: {
        timeChange: function () {
            var that = this;
            this.time = setInterval(function () {
                var time = new Date();
                let year = time.getFullYear(); //获取年份
                let month = time.getMonth() + 1; //获取月份
                let day = time.getDate(); //获取日期
                let hour = checkTime(time.getHours()); //获取时
                let minite = checkTime(time.getMinutes()); //获取分
                let second = checkTime(time.getSeconds()); //获取秒企鹅330586621交流
                 let today = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
                 let week = today[time.getDay()];
                /****当时、分、秒、小于10时，则添加0****/
                function checkTime(i) {
                    if (i < 10) return "0" + i;
                    return i;
                }
                that.allDate = `<span>week </span><span style="opacity: 0.4;">${year}-${month}-${day}</span><span style="opacity: 0.4;">${hour}:${minite}:${second}</span>`;
            }, 1000); //setInterval(fn,i) 定时器，每隔i秒执行fn

        },
        destroyed() {
        if (this.time) {
            clearInterval(this.time)
        }
    },
    created() {
        this.timeChange();
    },     
    },