推荐两个处理时间日期的库:
Moment.js ---JavaScript 日期处理类库
Moment.js 中文网Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期http://momentjs.cn/
Day.js ---是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间
Day.js中文网Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。https://dayjs.fenxianglu.cn/
单独写一个转换时间年月日时分秒的方法
timestamp参数是传入的时间戳,istrue参数外界可以传值控制显示是年月日还是时分秒
timestampToTime(timestamp, istrue) { // 时间戳转换
var strDate = '';
var date = new Date(timestamp * 1000);
var Y = date.getFullYear() + '-';
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
if (istrue) {
strDate = Y + M + D;
} else {
strDate = h + m + s
}
return strDate;
}
页面渲染动态时间,此方法在ie中也生效
data() {
return {
nowTime: '',
timer: ""
};
},
created() {
this.showTimes()
},
// 处理时间的方法逻辑 ---S
timeFormate(timeStamp) {
let date = new Date(timeStamp);
let year = date.getFullYear();
let wk = date.getDay()
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let week = weeks[wk]
// 拼接
this.nowTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + ' ' + week;
},
showTimes() {
this.timeFormate(new Date())
if (this.timer) return
this.timer = setInterval(() => {
this.showTimes()
}, 1000);
}
使用过滤器渲染动态时间的方法此方法不兼容ie
页面引用过滤器
<p>{{ newDate | dateFormat }}</p>
// 定义变量
data() {
return {
newDate: new Date(),
timer: null,
};
},
// 定义定时器,每过一秒钟更新当前的最新时间
mounted() {
let _this = this// 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(() => {
_this.newDate = new Date(); // 修改数据date
}, 1000)
},
// 过滤日期的过滤器 2022-07-22 13:55:47 星期五
Vue.filter('dateFormat', (time) => {
let date = new Date(time);
let year = date.getFullYear();
let wk = date.getDay()
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
let week = weeks[wk]
// 拼接
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + ' ' + week;
});
jQuery动态渲染页面时间的方法(兼容到ie8)
var pagetime = '';
function formatTime() {
var date = new Date();
var year = date.getFullYear();
var wk = date.getDay();
/* 在日期格式中,月份是从0开始的,因此要加0
* 使用三元表达式在小于10的前面加0,以达到格式统一 如 09:11:05
* */
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var week = weeks[wk];
// 拼接
return pagetime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds + ' ' + week;
};
setInterval(function () {
formatTime();
$("#timepage").html(pagetime);
}, 1000);