码迷,mamicode.com
首页 > 移动开发 > 详细

vue中解决时间在ios上显示NAN的问题

时间:2018-09-03 20:56:34      阅读:1048      评论:0      收藏:0      [点我收藏+]

标签:显示   记录   style   value   var   时间   orm   计时   tran   

最近在用vue,遇到倒计时在ios上显示为NAN的问题。

因为做的是倒计时支付,思路是获取服务器时间和下单时间,再转成秒级时间戳做差值。

在网上找到说是ios 不支持例如2018-09-01 10:00:59这种"-"连接符。

网上的解决是:

var data = ‘2018-09-01 12:00:00‘
var time= Date.parse(new Date(data ))

然后用正则匹配改一下,将-替换为/

var date = ‘2018-09-01 12:00:00‘
var format = date.replace(/-/g, ‘/‘)
var time= Date.parse(new Date(format))

但是问题还是没有解决,在ios上仍然显示为NAN

于是想到用moment.js,成功解决问题!!!

vue中先引入npm install moment --save

import moment from ‘moment/moment‘

然后

//注意:苹果手机不支持以“-”分割的时间形式,故必须进行格式转换为‘YYYY/MM/DD HH:mm:ss‘。
//date格式是后台返回过来的Timestamp 2018-09-01T09:10:41.000+0000
let transTime = moment(date).format(‘YYYY/MM/DD HH:mm:ss‘)
console.log(transTime)

输出

2018/09/01 09:10:41
//转为时间戳
let omTime = this.transformTime(transTime)

transformTime(t){
    console.log(‘转换前的时间‘+t)
    //利用moment工具生成date对象
    let date = moment(t).toDate()
    console.log(‘date:‘+ date)
    //变成秒级时间戳
    return moment(date).valueOf()
}
                    

这个omTime时间戳就可以用来和服务器的时间戳做差值实现倒计时了,

经测试,在android和ios上都没问题,问题终于搞定!!!

这里mark记录一下,分享给你们,避免踏坑太久。

 

vue中解决时间在ios上显示NAN的问题

标签:显示   记录   style   value   var   时间   orm   计时   tran   

原文地址:https://www.cnblogs.com/wzs5800/p/9580785.html

(0)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!