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

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

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

网上的解决是:

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

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

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上都没问题,问题终于搞定!!!

有关moment.js基本操作可参考:

https://blog.csdn.net/badmoonc/article/details/82142100

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

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

  1. JS文件中的中文在网页上显示为乱码解决方法

    转自:http://www.pc6.com/infoview/Article_63835.html 如果JS文件中的中文在网页上显示为乱码,不妨采用本文章中的方法来试一试,或许能解决使你很头疼的问题. ...

  2. vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上

    一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...

  3. vue 中使用iconfont Unicode编码线上字体图标的流程

    1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然 ...

  4. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

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

    场景 状态栏上显示通知效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新 ...

  6. 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况

    //有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...

  7. ios日期显示NaN

    ios中js通过getMonth()获取到的日期显示NaN,而在其他地方如pc.安卓都是ok的,这是为什么呢,原来这里有个ios的兼容问题,需要将日期中的“-”替换为“/” var time = ne ...

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

    在iOS开发中,我们会经常遇到一个问题,例如,点击一个按钮,弹出一个遮罩层,上面显示一个弹框,弹框显示的位置在按钮附近.如果这个按钮的位置相对于屏幕边缘的距离是固定的,那就容易了,可以直接写死位置.可 ...

  9. 关于PHP中拿到MySQL中数据中的中文在网页上显示为?的解决办法!

    问题: 解决方案: 在PHP 代码中 输入 : //$connection 是链接数据库返回的变量名: mysqli_set_charset($connection,'utf8'); 完美解决:

随机推荐

  1. 本地不安装Oracle时,PLSQL的配置

    这篇我在csdn上写过的,文章地址:https://blog.csdn.net/weixin_40404606/article/details/101940542

  2. n次方

    1.问题描述 计算 an 2.算法分析 先将 n 变一变,寻找新的计算路径.预处理就是变治法的根本. 如果单纯循环执行 n 次相乘,那么时间复杂度为 O(n).可以利用二进制幂大大改进效率. 主要思路 ...

  3. 模块 face_recognition 人脸识别

    face_recognition 人脸识别 api 说明 1 load_image_file 将img文件加载到numpy 数组中 2 face_locations 查找图像中所有面部和所有面部特征的 ...

  4. pinpoint配置使用

    一.下载pinpoint包 从https://github.com/naver/pinpoint/releases 下载 pinpoint-agent.tar.gz pinpoint-collecto ...

  5. JS数据结构与算法——栈

    JS数据结构与算法--栈 1.栈结构概念 栈(Stack)是一种先进后出(LIFO Last in First out)的线性表,先进栈的将会比后进栈的先出栈. 栈的限制是仅允许在一端进行插入和删除运 ...

  6. 【WPF学习】第六十六章 支持可视化状态

    上一章介绍的ColorPicker控件,是控件设计的最好示例.因为其行为和可视化外观是精心分离的,所以其他设计人员可开发动态改变其外观的新模板. ColorPicker控件如此简单的一个原因是不涉及状 ...

  7. 如何关闭Springboot应用服务

    背景 以往的单机应用会采用kill方式关闭应用服务,但是这种关闭应用的方式在springboot中会让当前应用将所有处理中的请求丢弃,返回失败响应.我们在处理重要业务逻辑要极力避免的这种响应失败在,所 ...

  8. Java第二十九天,文件及目录的管理,File类

    一.基础知识点 1.路径分隔符 (1)什么是路径分隔符? 这个多被应用在环境变量设置当中,例如当我设置Path环境变量时,多个环境变量的路径要用 ':'(Windows系统用封号分隔)或 ':'(Li ...

  9. ubuntu18.04配置宽带上网

    1.将 /etc/NetworkManager 目录下的 managed标签改为true 2.将 /etc/network/ 目录下的 interfaces文件只留下前两行: auto lo ifac ...

  10. DataAnalysis-SOP

    一.关于数据分析 a. 互联网最热职位:研发工程师.产品经理.人力资源.市场营销.运营.数据分析(供不应求) b. 数据分析的步骤:明确目的/思路.数据收集.数据处理.数据分析.数据展现 c. 数据分 ...