前端处理订单倒计时显示问题

前言

项目中有下图这样一个显示倒计时的需求，需要实现；
一开始想法是需要接口返回 到期时间戳 减去 客户端当前时间 ，然后计算出要显示 倒计时剩余时间 ；最后感觉用客户端时间会不准确，可能会出现服务器时间已经显示到期，但是客户端还差几分钟的情况，所以和后端商量他那边计算 到期时间戳 - 服务器时间戳 = 服务器待付款时间差，最后把服务器待付款时间差的时间戳返给我，我再对这个时间戳进行处理，生成下面设计图这种时间样式

具体步骤

和后端商量他那边计算 到期时间戳 - 服务器时间戳 = 服务器待付款时间差，最后把服务器待付款时间差的时间戳返给我

对返回的时间戳进行处理，对应天，时，分

递归的方式使用setTimeOut()，每60s调用runBack方法一次，显示动态时间效果

最后在实例销毁前清除 setTimeOut() 定时器，防止内存泄漏

代码

最后附上自己写的倒计时代码

<template><div class="root"><div class="time" v-if="resData.status !== 3"><span>剩余</span><span v-if="day != '00'">{{ day }}天</span><span>{{ hour }}小时</span><span>{{ minute }}分钟</span><span>{{ resData.status === 1 ? '自动关闭' : '自动收货' }}</span></div></div>
</template><script>
export default {data () {return {day: '00',hour: '00',minute: '00',timer: 0}},methods: {getOrderDetail () {signApi['orderDetail']({orderSn: this.$route.query.order_sn}).then(res => {if (res.data.code === 200) {this.resData = res.data.datalet temp = res.data.datalet payDiff = temp.pay_off_time // status=1 表示待支付 服务器待付款时间差let deliverDiff = temp.delivery_finish_time // status=2 表示待收货 服务器待收货时间差  （只会返回其中一种状态）if (payDiff) {this.countdown(payDiff)} else if (deliverDiff) {this.countdown(deliverDiff)}}}).catch(error => {console.log(error)})},// 倒计时countdown (diff) {let diffTime = diff * 1000 // 时间差 s转为msthis.runBack(diffTime)},runBack (diff) {if (diff > 0) {let dd = parseInt((diff / 1000 / 60 / 60 / 24) % 1)let hh = parseInt((diff / 1000 / 60 / 60) % 24)let mm = parseInt((diff / 1000 / 60) % 60)this.day = dd > 9 ? dd : '0' + ddthis.hour = hh > 9 ? hh : '0' + hhthis.minute = mm > 9 ? mm : '0' + mm// 递归的方式使用setTimeOut(),相当于setInterval()，显示动态时间效果// setTimeOut()方法会返回一个数值ID，便于清除定时器时使用this.timer = setTimeout(() => {diff -= 60000this.runBack(diff)}, 60000)} else {// 订单已过期this.day = '00'this.hour = '00'this.minute = '00'}}},mounted () {this.getOrderDetail()},// 销毁前清除定时器，防止内存泄漏beforeDestroy () {clearTimeout(this.timer)}
}
</script><style></style>

关于 setTimeout和setInterval

可参考：
支付订单中未付款倒计时讲的比较细致
vue实现时间倒计时功能有settimeout递归调用函数
web前端处理订单待支付倒计时计算显示问题

前端处理订单倒计时显示问题相关推荐

微信小程序多条订单倒计时显示
操作步骤: 1.获取订单下单时间戳与订单限制付款时间,如:订单在60分钟会自动取消(与分钟为举例) 限制时间戳=获取订单下单时间戳+订单限制付款时间(分钟)*60; 把限制时间戳转为时间格式,方面js ...
微信小程序之订单倒计时实现
倒计时之前在做一个有拼团功能项目的时候遇到过倒计时的问题,由于当时技术不熟在这方面耽搁了好些时间,所以这里整理出来希望能为后来人提供些许启发. 1.实现思路: 求出发起拼团时间与拼团结束时间的时间差 ...
【系】微信小程序云开发实战坚果商城-前端之订单实现
第 2-7 课:前端之订单实现目录开篇 [系]微信小程序云开发实战坚果商城-开篇基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 [系] ...
订单倒计时取消，nodejs 辅助实现倒计时任务
2019独角兽企业重金招聘Python工程师标准>>> 首先本地安装node环境由于小编是搞后台开发的,前段框架略知一二,此处就不班门弄斧了,网上很多教程 http://nodej ...
前端服务器OWA 访问显示异常最佳解决方案
EXCHANGE2003环境: 前端服务器:denver 后端服务器:sbs1 出现的问题: 当从一台XP客户端通过OWA进行访问时,如直接通过后端[url]http://sbs1/excha ...
php倒计时关闭订单,订单倒计时取消，nodejs 辅助实现倒计时任务
首先本地安装node环境由于小编是搞后台开发的,前段框架略知一二,此处就不班门弄斧了,网上很多教程 http://nodejs.cn/ win和linux找才对应包安装完成之后创建node一个框架 ...
cmdb python 采集虚拟机_Python编程(三十四)：CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...
一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...
vhdl7我学习得第一个fpga项目——倒计时显示
之前也编写过fpga程序,但是那都相当于一个子程序,我们知道fpga是模块化设计,自顶向下的构造.那么今天学会了第一个fpga项目:倒计时显示. 1.功能: 1)开关控制计数器工作. 当开关作用,le ...
echarts中markline设置后，前端其他数据都显示了，就是不显示markline，请求赐教
Echarts菜鸟,刚刚开始学习,请问echarts中markline设置后,前端其他数据都显示了,就是不显示markline,就是不显示警戒线!!!!请求大神赐教 option5 = { toolt ...

前端处理订单倒计时显示问题

前言

具体步骤

代码

关于 setTimeout和setInterval

前端处理订单倒计时显示问题相关推荐

最新文章

热门文章