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

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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值