在商城类项目的时候，有很多待支付的订单，有时候在订单列表页面会分别显示倒计时，就是页面会有很多倒计时的订单。

处理方法：

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前端处理订单待支付倒计时计算显示问题的更多相关文章

  1. web前端逻辑计算，血的教训

    在web前端进行页面开发的过程中,难免的遇到逻辑问题,这不是什么大问题,既然走上IT条黑道,那小伙伴们的逻辑推理能力及逻辑计算能力是不会有太大问题的. 然而,有的逻辑计算,就算你逻辑计算能力超强,也不 ...

  2. 【收藏】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  3. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  4. 【分享】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  5. 前端工程师在实现支付功能的时候能做些什么（V客学院技术分享）？

    现在最流行的两种支付微信支付和支付宝支付,在日常开发的过程中肯定离不开支付功能的开发,有很多人第一次接触时会有些措手不及. 一.业务逻辑 (电商平台为例子) 支付大部分用在电商平台,各种打赏,游戏充值 ...

  6. WEB前端工程师简历

    一个热爱前端的工程师 关于我 我的作品 ZENRON 关于我 求职意向 作品集 技术掌握 我的经历 联系我 关于我 英语/CET-4 坐标/苏州 状态/求职 我叫Zenron, 现居住苏州, 是一名前 ...

  7. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  8. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  9. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

随机推荐

  1. 【转载】CentOS 安装rz和sz命令 lrzsz

    lrzsz在linux里可代替ftp上传和下载.lrzsz 官网入口:http://freecode.com/projects/lrzsz/ lrzsz是一个unix通信套件提供的X,Y,和ZMode ...

  2. 为 Elasticsearch 添加中文分词，对比分词器效果

    转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...

  3. 使用Selenium爬取网站表格类数据

    本文转载自一下网站:Python爬虫(5):Selenium 爬取东方财富网股票财务报表 https://www.makcyun.top/web_scraping_withpython5.html 需 ...

  4. 学习Linux服务的方法

    1.服务的概述:名字.功能.特点.原理.端口号 2.安装 3.配置文件的位置 4.服务器启动.关闭的脚本,查看端口 5.此服务的使用方法 6.修改配置文件,案例部署 7.排错调优

  5. ldap 禁止匿名登录（5）

    [root@zabbix1 ~]# cat disable_anon.ldif dn: cn=config changetype: modify add: olcDisallows olcDisall ...

  6. Golang - 爬虫案例实践

    目录 Golang - 爬虫案例实践 1. 爬虫步骤 2. 正则表达式 3. 并发爬取美图 Golang - 爬虫案例实践 1. 爬虫步骤 明确目标(确定在哪个网址搜索) 爬(爬下数据) 取(去掉没用 ...

  7. dev的汉化

    dev汉化网上有很多介绍.自己感觉还是用ini文件,用Localization Component来的简单方便. 但是根据其16.1.6的demo死活出问题.原因是ini文件的编码问题.转换到位自然就 ...

  8. 图论·Floyd算法·HDU2544&1874 （伪）2066

    在看到1874的题时,第一反应是用上一篇的并查集方法,后来查了一下是要用Floyd做,所以就去查Floyd算法的资料. 即插点法,是一种用于寻找给定的加权图中顶点间最短路径的算法. 核心代码:  ma ...

  9. Spring Boot-springbootHelloword(一)

    什么是springboot sprng家族一个全新的框架  简化我们应用程序的创建和开发的过程,使用默认配置简化了我们以前传统的配置 springboot的特性     能够快速创建spring程序 ...

  10. 洛谷 P2341 BZOJ 1051 [HAOI2006]受欢迎的牛

    题目描述 每头奶牛都梦想成为牛棚里的明星.被所有奶牛喜欢的奶牛就是一头明星奶牛.所有奶 牛都是自恋狂,每头奶牛总是喜欢自己的.奶牛之间的“喜欢”是可以传递的——如果A喜 欢B,B喜欢C,那么A也喜欢C ...