项目背景
uniapp开发中,考试模块的时间显示,因为每次进入考试都要重新计算开始的时间,因此使用moment.js十分方便,但要注意在ios系统中时间格式问题;
moment.js使用步骤
Moment.js是一个轻量级的JavaScript日期库,可以解析,验证,操作和格式化日期。
1.安装
npm install moment --save
2.引入
import moment from 'moment'
Vue.prototype.$moment = moment
3.使用
// 1.转换为当前时间的时间戳
var timestamp = moment().unix();
console.log(timestamp);
// 2.转换为指定日期时间的时间戳
var timestamp1 = moment('2023-09-22 09:34:56').unix();
console.log(timestamp1);
// 3.转换为指定时区的时间戳
var timestamp2 = moment.tz('2023-09-22 09:34:56', 'America/Los_Angeles').unix();
console.log(timestamp2);
// 4.计算两个日期之间的时间差
var start = moment('2021-01-01');
var end = moment('2021-12-31');
var diff = end.diff(start); // 计算时间差,以毫秒为单位
console.log(diff);
// 5.将当前日期格式化为指定时间格式 ,此处为常用的年月日时分秒
var formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(formattedDate);
项目例子
将考试计划结束时间获取,再加上当前进入考试的时间,计算出剩余时间戳,然后传值显示;
this.endDataTime = examTimeInfo.examEndTime;
this.startDataTime = this.formatter(new Date(), 'yyyy-MM-dd hh:mm:ss');
// 处理字符串为时间类型
let startTime = Date.parse(this.startDataTime.replace(/-/g, "-"));
let endTime = Date.parse(this.endDataTime.replace(/-/g, "-"));
// 调用moment插件计算时间差(做完这一步timeStamp为时间戳了)
this.timeStamp = this.$moment(endTime).diff(this.$moment(startTime));
this.restTime = this.toHHmmss(this.timeStamp);//赋值时分秒
问题解决
原因是yyy-mm-dd hh:mm:ss 格式ios不识别,ios系统中的时间格式为2023/9/22 而安卓系统这种格式和2023-09-22 都能兼容,所以最后问题解决很简单;在处理时间字符串的那块,把yyy-mm-dd hh:mm:ss 格式转换成 yyy/mm/dd hh:mm:ss,即“-” 改为 “/”。
let startTime = Date.parse(this.startDataTime.replace(/-/g, "/"));
let endTime = Date.parse(this.endDataTime.replace(/-/g, "/"));
以上即为本人项目中的处理思路,若有帮助到你,那真的太好了!
若没有望亲喷