时间戳转换年月日-时分秒的方法-页面渲染动态时间

推荐两个处理时间日期的库:

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值