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);