vue中解決時間在ios上顯示NAN的問題

標籤：顯示   記錄   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+0000let 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的問題