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

最近在用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记录一下,分享给你们,避免踏坑太久。

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

时间: 2024-08-02 14:19:55

vue中解决时间在ios上显示NAN的问题的相关文章

【备忘录】javascript Date在ios上显示NAN

var dateStr = "2016-01-19 00:00:00"; var d = new Date(dateStr.replace(/-/g, '/')); or 参考:http://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios

flexview模板中解决图表控件不能显示的问题

在flexview模板中的baseWidget.as中,填写如下代码: override public function get moduleFactory():IFlexModuleFactory { return FlexGlobals.topLevelApplication.moduleFactory; } flexview模板中解决图表控件不能显示的问题

Android中使用Notification在状态栏上显示通知

场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建NotificationActivity,通过getSystemService方法获取通知管理器. 然后创建通知并设置通知的一些属性,再使用通知管理器发送通知. package com.badao.relativelayouttest; import androidx.annotation.Req

ios日期显示NaN

ios中js通过getMonth()获取到的日期显示NaN,而在其他地方如pc.安卓都是ok的,这是为什么呢,原来这里有个ios的兼容问题,需要将日期中的"-"替换为"/" var time = new Date("2017-6-21 18:00:00".replace(/-/g,'/')); alert(time.getMonth())//都可以正常显示"6"了

iOS开发中获取视图在屏幕上显示的位置

在iOS开发中,我们会经常遇到一个问题,例如,点击一个按钮,弹出一个遮罩层,上面显示一个弹框,弹框显示的位置在按钮附近.如果这个按钮的位置相对于屏幕边缘的距离是固定的,那就容易了,可以直接写死位置.可是,如果按钮是在UITableView的cell上呢?随着UITableView的滚动,按钮可能在顶部,也可能在底部,还可能在中间,左侧.右侧都有可能,那么,这个时候,怎么去计算按钮所在的位置呢?如果按钮所在的UITabelView是在另外一个UIScrollView的一个cell上呢?如果外面再有

解决SQL Server 2005数据库中datetime时间字段在前端显示时分秒的问题

SQL Server 2005中时间类型datetime的格式是"年月日时分秒",直接读出来该字段,为了不让它在前端显示"时分秒"若是显示在dataGridView中,可以修改控件的某一列格式,如: dataGridView1.Columns[10].DefaultCellStyle.Format = "yyyy-MM-dd"; 但是要在listview控件中的话,就有点困难了,貌似没有类似的属性,这样的话,考虑从数据源入手. 1.获取当前年月日

easyui中datagrid时间格式化(只显示年月日)

最近才开始用easyui和mvc4做项目,对JQUERY什么的完全不熟,datagrid在解决的json转换日期格式的问题后,又出现了新的问题,表格中的日期成了这样 XX日期2015-3-1 00:00:00 看起来用户体验很差,以前在WEB FORM的时候还是挺好改这种的,可是现在却无从下手,直到刚才看到某人的文章,才发现方法不要太简单,datagrid 里有fomatter方法,可以写成这样 {    field: 'VehicleInspectionDate', title: '审验有效期

vue中解决拖动和点击事件的冲突

BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案:因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的时间差,与200ms作比较,作为全局变量.由于vue的directives自定义指

vue cli 解决跨域 线上 nginx 反向代理配置

前后分离 axios 接 api 跨域问题如图: 解决办法: 1. npm start 本地开发环境解决: 在webpack配置文件 /config/index.js 里找到 proxyTable 开启代理 changeOrigin:true, proxyTable: { '/api':{ target:'http://xx.xx.xx.xx:5568', changeOrigin:true, pathRewrite:{ '^/api':'/api' } } }, 2. npm run buil