web前端处理订单待支付倒计时计算显示问题
在商城类项目的时候,有很多待支付的订单,有时候在订单列表页面会分别显示倒计时,就是页面会有很多倒计时的订单。
处理方法:
1.调用后端接口拿到所有的订单,获取所有的倒计时订单,获取到期时间(尽量时间戳,不行就自己转换)。
2.渲染列表的时候把未支付的订单加上计数器dom,然后把到期时间戳写在dom属性里面。
3.在计时器里面轮询 计时器dom,获取到期时间戳减去当前时间,然后计算出要显示的时间,从新修改计数器dom。
4.如果到期了就改变订单状态,如果这个时候如果dom过多处理起来或许会有延迟,但是也就差一丢丢,后端也会做超时取消的,前后端都做。
5.如果后端不做的话,就是前端拿到超时订单,先修改dom,然后在用这个订单号调接口让后端修改这个订单状态。
(后端有时候不会这样给,有时候是给你下单时间,然后自定义个倒计时15分钟,或者半小时,到期调接口改状态,这个时候就得自己计算出来到期时间戳了)
附上自己写的倒计时计时器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="order-daojishi-time"></div>
</body>
<script>
function timeStamp(second_time){
if(second_time<=){
return;
}
var time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>00</span>分<span>'+parseInt(second_time)+'</span>秒</p></div>';
if( parseInt(second_time )> ){
var second = parseInt(second_time) % ;
var min = parseInt(second_time / );
time = '<div><p><span>00</span>天</p><p><span>00</span>时<span>'+min+'</span>分<span>'+second+'</span>秒</p></div>';
if( min > ){
min = parseInt(second_time / ) % ;
var hour = parseInt( parseInt(second_time / ) / );
time = '<div><p><span>00</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';
if( hour > ){
hour = parseInt( parseInt(second_time / ) / ) % ;
var day = parseInt( parseInt( parseInt(second_time / ) / ) / );
time = '<div><p><span>'+day+'</span>天</p><p><span>'+hour+'</span>时<span>'+min +'</span>分<span>'+second +'</span>秒</p></div>';
}
}
}
return time;
}
setInterval(function(){
var expireTime = ;//订单过期时候的时间戳,或者是一个其它时间,这里灵活处理
var houtime = Number(expireTime-Date.parse(new Date()))/;//秒
console.log(Date.parse(new Date()))
document.getElementById('order-daojishi-time').innerHTML = timeStamp(houtime);
},) </script> </html>
web前端处理订单待支付倒计时计算显示问题的更多相关文章
- web前端逻辑计算,血的教训
在web前端进行页面开发的过程中,难免的遇到逻辑问题,这不是什么大问题,既然走上IT条黑道,那小伙伴们的逻辑推理能力及逻辑计算能力是不会有太大问题的. 然而,有的逻辑计算,就算你逻辑计算能力超强,也不 ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- Web前端-Vue.js必备框架(五)
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 前端工程师在实现支付功能的时候能做些什么(V客学院技术分享)?
现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...
- WEB前端工程师简历
一个热爱前端的工程师 关于我 我的作品 ZENRON 关于我 求职意向 作品集 技术掌握 我的经历 联系我 关于我 英语/CET-4 坐标/苏州 状态/求职 我叫Zenron, 现居住苏州, 是一名前 ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- web前端面试试题总结---html篇
HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...
随机推荐
- MVC 运行视图出错
IIS服务器web核心没有安装造成的
- grep命令总结
grep (缩写来自Globally search a Regular Expression and Print)是一种强大的文本搜索工具,它能使用特定模式匹配(包括正则表达式)搜索文本,并默认输出匹 ...
- BZOJ 1594: [Usaco2008 Jan]猜数游戏 线段树 + 思维 + 二分
Code: #include<bits/stdc++.h> #define maxn 3000000 using namespace std; void setIO(string s) { ...
- [POI2005]SKA-Piggy Banks tarjan 水题
Code: #include<bits/stdc++.h> #define maxn 1000002 using namespace std; void setIO(string s) { ...
- 查看表之间的关系 需要在eas中的商业分析-扩展报表中心-报表平台下的语义层方案管理
查看表之间的关系 需要在eas中的商业分析-扩展报表中心-报表平台下的语义层方案管理
- SQL第一节课
phpmyadmin create table 表名( 列名 数据类型 是否为空 (是否主键|是否唯一|外键关系), 列名 数据类型...(最后一列不加逗号)) create database 数据库 ...
- Centos 7, Torque 单节点部署
1.准备工作 安装Torque必须首先配置linux主机名称,服务器主机名称大多默认localhost,不建议直接使用localhost. linux主机名称修改地址:http://www.cnblo ...
- MySql数据库的一些基本操作---------------SQL语法
MySql数据库是比较常用的关系型数据库,操作用的是sql语句,下面来说一说MySql的一些基本操作 MySql数据库是一种C/S型的模式,即客户端/服务器端,对应到具体应用上,便是bin目录下的my ...
- lucene_07_solr使用IK分词器
使用IKAnalyzer 中文分析器.. 第一步: 把,IKAnalyzer2012FF_u1j 添加到sol/WEB-INF/lib 目录下. 第二步: 复制IKAnalyzer 的配置文件和自定义 ...
- setTimeout(fn,0)的作用分析
众所周知,大家对setTimeout的用法肯定都比较熟悉了,但是不是还是会经常忘记使用呢,例如博主阿里面试时就忘了,见阿里前端面试. 今天跟大家讨论一下setTimeout(fn,0)的用法,相信很多 ...