大屏右上角的年月日时分秒

最新推荐文章于 2023-12-17 16:09:02 发布

原创最新推荐文章于 2023-12-17 16:09:02 发布 · 812 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个Vue组件，用于实时更新并显示当前日期和时间。通过`mounted`生命周期钩子设置定时器，每500毫秒更新`<span class=ymd>`和`<span class=hms>`的内容，格式化为年月日和小时分钟秒。在组件销毁前，使用`beforeDestroy`钩子清除定时器，确保资源有效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue


<span class="ymd">{{ date }}</span>
<span class="hms">{{ nowDate }}</span>


export default {
	data() {
    	return {
      		nowDate: '',
      		date: '', // 当前日期
    	}
	},
	mounted() {
    	this.currentTime();
	},
	methods：{
		currentTime() {
      		setInterval(this.formatDate, 500)
    	},

    	formatDate() {
      		const date = new Date()
      		const year = date.getFullYear() // 年
      		const month = date.getMonth() + 1 // 月
      		const day = date.getDate() // 日
      		const week = date.getDay() // 星期
      		const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      		let hour = date.getHours() // 时
      		hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      		let minute = date.getMinutes() // 分
      		minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      		let second = date.getSeconds() // 秒
      		second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      		this.nowDate = `${hour}:${minute}:${second} |`
      		this.date = `${year}-${month}-${day} ${weekArr[week]}`
    	}
	},
	// 销毁定时器
 	 beforeDestroy() {
    	if (this.formatDate) {
      	clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    	}
  	}
}

在这里插入图片描述
HTML

//  右上角日期与时间
        function clock() {
            var date = document.getElementById('kdate'); //首先获取到HTML里需要插入的节点
            var ktime = document.getElementById('ktime');
            var time = new Date; //获取中国标准时间 
            var Year = time.getFullYear(); //获取当前年份
            var Month = (time.getMonth() + 1).toString(); //获取当前月份(＋1是因为js中月份是从0开始的)
            var Day = time.getDate().toString(); //获取当前几号
            var W = time.getDay(); //获取当前星期几
            var week = ['日', "一", "二", "三", "四", "五", "六"]; //一般星期几都是用汉字写的,这里转换一下汉字
            var hour = time.getHours().toString(); //获取系统时
            var minute = time.getMinutes().toString(); //获取系统分
            var second = time.getSeconds().toString(); //获取系统秒
            function timeAddzero(str) {
                if (str.length <= 1) {
                    str = '0' + str;
                }
                return str
            }
            Month = timeAddzero(Month);
            Day = timeAddzero(Day);
            hour = timeAddzero(hour);
            minute = timeAddzero(minute);
            second = timeAddzero(second);
            //字符串拼接,拼接到一起
            date.innerHTML = Year + '-' + Month + '-' + Day + "\xa0\xa0" + '星期' + week[W];
            ktime.innerHTML = hour + ':' + minute + ':' + second
        }
        //使用定时器每秒想页面写入一次时间
        setInterval("clock()", 1000);