电商网站支付倒计时前端如何实现

‘壹’ WEB前端是什么

前端是什么，官方的定义就是即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

用通俗易懂的话来说，前端就是网

站展示给你的部分。，前端开发就是在创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互，也就是代码的实现。

可能说前端就是网页设计，但也不全是。现在的前端早已不同于以前的网页设计，早年的网页设计主要是以图片和文字为主，用户使用网站的行为也以浏览为主。而现在的前端开发使得现代网页更加美观，交互效果显着，功能更加强大。所以现在的前端开发，运用到的知识面更加广泛，难度也更大。

前端需要学习的范围很广，知识面很全面广泛，学习起来也有一定难度，是一定要下功夫才能做好的。

‘贰’ 前端：验证码倒计时功能实现

文 / 秦未

HTML：

jQuery：

‘叁’ vue数据列表倒计时，如何实现

‘肆’ 订单支付倒计时处理方法记录

实现情景是：在获取到订单详情后，页面上有一个订单支付倒计时显示 xx:xx:xx；需求是在订单创建后10分钟后如果没有支付就自动取消并显示倒计时时间。

倒计时使用了uniapp插件市场里的一个组件（组件地址： https://ext.dcloud.net.cn/plugin?id=772 ）

实现思路：

1：先获取当前时间戳:；

2：10分钟的毫秒数为10x60x1000毫秒，订单自动支付时间为=订单创建时间 + 10x60x1000毫秒 ；

3：订单自动支付时间  - 当前时间时间 =相差时间 ，如果相差时间大于10分钟则执行取消订单操作，否则则计算相差时间的时分秒进行显示倒计时；

程序设计：

// 计算支付倒计时

let nowtime = Date.parse(new Date()); //获取当前时间

let paytime = 10 * 60 * 1000 //10min的秒数,订单超过10分钟未支付就自动取消

let ctime = _this.data.create_time * 1000

let startTime = nowtime; // 开始时间

let endTime = new Date(ctime+paytime); // 结束时间

let usedTime = endTime-startTime ; // 相差的毫秒数

// console.log("【相差的毫秒数】", usedTime)

if (usedTime > paytime) {

_this.timeUp()  //取消订单操作函数

} else {

let days = Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数

let leavel = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的时间

let hours = Math.floor(leavel / (3600 * 1000)); // 计算剩余的小时数

let leavel2 = leavel % (3600 * 1000); // 计算剩余小时后剩余的毫秒数

let minutes = Math.floor(leavel2 / (60 * 1000)); // 计算剩余的分钟数

let miao = Math.floor(leavel2 / 1000 % 60)

if (days <= 0 && hours <= 0 && minutes <= 0 && miao <= 0) {

  _this.timeUp()  //取消订单操作函数

} else {

_this.hour = days * 24 + hours   //倒计时剩余小时

_this.minute = minutes  //倒计时剩余分钟

_this.second = miao  //倒计时剩余秒数

// console.log("剩余时间", (days * 24 + hours) + '小时' + minutes + '分' + miao + '秒');

}

}

‘伍’ 电商前端架构设计

什么是前端架构

• 说到架构，很容易拉出一系列的概念知识点，像系统架构、软件架构、框架等等，这些不是今天探讨的重点，大家可以下去网络来理解。架构的本质是什么？其实也是一种管理。通常我们所说的管理，都是指对于任务和人员的管理，而架构管的是机器和代码。比如说，机器的部署属于运维的物理架构，SOA属于服务架构，那么，前端的架构指什么呢？

• 长期以来，前端所处的位置是比较偏应用层，很薄的一层，而架构又要求深度和广度，所以之前在前端里面做架构，好比在小水塘里游泳，稍微扑腾两下就到处碰壁。但最近这几年来，随着一些列新的技术和概念的出现，前端的范围被大大拓展了，所以这一层逐渐变得大有可为。

• 单纯从语言的角度来说，html、js、css是最简单最容易上手的开发语言，不考虑模块化、工具、压缩优化，任何人都可以快速上手，完成一两个功能简单的页面。在规模很小的项目中，前端技术要素彼此不会直接产生影响，因此无需架构相关的思考。由于前端语言这种灵活松散的特点，使得前端项目规模在达到一定规模后，工程问题凸显，成为发展瓶颈，原来孤立的技术要素开始彼此产生影响，各种技术要素彼此之间开始出现关联，要用模块化开发，就必须对应某个模块化框架，用这个框架就必须对应某个构建工具，要用这个工具，就必须对应某个包管理工具……这个时候，需要有人从比较高的角度去梳理、寻找适合自己团队的集成解决方案。而这一系列解决问题的工具和手段就是所谓的前端架构。

架构的组成

组件框架

• 架构不等于框架这一点很好理解，相信大家都能够很深入的说明这里的差别，框架是架构的重要组成部分，架构决定框架的选型，框架决定架构的技术路线。架构围绕框架进行一系列的流程工具建设，从而形成完善自动的开发体系。
  +框架不等于类库，这里就是很多人困惑的点，你用的什么框架？jquery、underscore、linq、seajs、requirejs等等，每个人都能够列举一大堆。但这个是不准确的，一套编码框架是有一系列的元素组成：

• 开发模式，我们如何来实现代码的职责分离。以前整个前端是mvc中v这一层，而现在前端内部也进行了mvc的逻辑细分，Javascript的MVC框架现在很多，有的强化m、有的强化c。每一个框架其实都有其特点的，并且有越来越多的创新改造，比如现在最流行的是mvvm。有angular、react等等。我们是为了引入mvvc才把他们纳入到我们的开发体系，而不是因为他是一个好用的类库。

• 通讯，模块化、组件化是前端在推进开发模式过程中的一个过程产物，为了有效的进行组件隔离和独立，现在有各种各样的通信模型出来，不过由于实现简单，代码少，他往往是合入到某个类库里面，但本质也是一个类库。比较成熟的比如：消息总线、事件模拟、缓存中转、flux模型等等。

• 模板，我们用什么样的方式来集中的处理数据往html的转换过程，这里就不用多展开，这种类库现在太多了，光我们公司就有很多套，大家在代码行、缓存管理、预编译、运算性能、强大的语法等等各个维度不段追求各种极致。

• 基础类库最后才是传统类库，相信现在已经没有同学会在项目中去约束团队中的dom操作、常用函数、方法、异步化等等各种很基础东西，这个时候我们一般就是引入jq、zepto、underscor这些封装好的东西就行了。核心就是为了改善编码生产力。

• 对于框架的选型要从两面看，一是看该框架的本领，二是看你们团队的能耐。从经验上给几个点建议：

• 这里也可以顺便展开聊一下现在前端产品的形态分类：

• 从这些分类里面，我们这些年派生出了所谓全端和全栈的概念。但本质上怎么走还是要由所在产品的形态来决定。

• 内容型Web站点 侧重渲染方面的优化，前端逻辑比重小

• 操作型B/S系统 以数据和逻辑为中心，界面较规整

• hybrid内置型，要处理缓存和一些本地接口，包括PC客户端和移动端。现在的本地应用，基于很多考虑，都变成了混合应用，也就是说，开发这个应用的技术，既包含原生的代码，也包含了嵌入的HTML5代码

• Web游戏，前端的逻辑非常重，在代码结构上要求非常高的可管理性和更复杂的设计模式。

• 桌面应用型，现在有一些PC端的混合应用开发技术，比如node-webkit和hex，前者的典型应用是XDK，后者的典型应用是有道词典，此外，豌豆荚的PC客户端也是采用类似技术的，也有一些产品是用的qt-webkit。这类技术可以方便做跨平台，极大减少开发工作量。

• 大工程应该尽量避开谷歌产品，他的很多技术开源项目都是玩票性质的，GWT、Closure、Darty就是前车之鉴。曾今提出过很多的新技术，到现在还是独家的，变出太大。包括现在angular，喜欢做断崖式升级，做做运营后台系统问题不大，如果是线上系统的话，每次升级就是一次人月神话中的典型焦油坑。

• 关注应用场景，像刚才说到的boss后台是一种；另外我的平台是否有沉重的历史包袱，需要兼容ie6，还是可以轻装上阵；产品对于seo是什么样的态度？是否需要考虑自适应？或者我的团队足够大，能够各搞一套？；产品特征是强内容还是强交互或者是游戏性。这些都是选择不同框架的主要出发点。

• 没有最好，只有最适合自己的，基本上，针对每个平台，我们都可以列出一些主流框架，但不意味着你们都能驾驭得住。小马过马，老牛没过膝，松鼠淹个半死，就是这么回事。但无论我们选择什么框架或决定自己动手造轮子，都勿忘初心，技术必须让我们工作生活更为轻松愉快——我们只选择我们能驾驭住的框架，我们不能保证它在一年后是否会过时落后。

• 而且按照我个人这么多年的经验来看，任何框架都会过时，往往不是因为他不够好，而是因为一定有更好的出来。我们再选择一个框架或者一个类库的时候就要想好，未来我如何抛弃他。至少不能成为我们引入新的框架的绊脚石。现实的工作中很多的团队往往会陷入到年复一年的用今年的新框架去重构去年老框架代码的历史循环中去。对于引入框架如何尽量延长他的生命力，我个人的意见是选择框架时去追求概念，而不是潮流，当我的架构可以接受新的设计概念的时候才去考虑引入新的框架。用设计理念的选择代替框架的选择。之所以这么说是因为我观察到我们部门的后端架构的开发理念跟我进公司的时候是差不多的。更多你可以参考成都网站建设

‘陆’ 产品设计之付款倒计时

    在互联网产品中，线上订单是常见且基础的组成部分，特别是近几年火爆的O2O，还有那老生常谈的电商。 想必经常网购的朋友们都很熟悉“剩余付款时间xx分钟”这个东西，下面我就付款倒计时这个事情深入探讨一下。

    为什么在提交订单后会有一个一般xx分钟的倒计时？ 其实，这是释放库存的时间。库存对于大家想必都很清楚，我们还没达到物质极大丰富的共产主义社会，包括线上商品都是有一个库存或数量限制的。当然，对于用户、消费者来说，这个时间就是“决定要不要买的考虑时间”。

    不同的电商业务，这个释放库存的时间会有所不同，这要根据库存程度的强弱来判断。这个库存程度可以从两个维度去考虑， 时间属性 和 数量属性 。

    时间属性，指的是对于商品来说的时间要求。比如火车票中车次的发车时间、电影票的开场时间等，像火车票、电影票这种商品，库存程度就比较强，时间要求比较高。数量属性，指的是对于商品来说的数量要求。比如，这几天刚发售的iphone 7，供货远少于市场需求，像iphone这种商品，本身并无时间属性，数量的要求就比较高。

    1. 时间属性比较强的商品订单

比如火车票、电影票商品，一般 30分钟以内 的付款倒计时。当然这个时间业界是没有统一规定的，像美团、大众点评等，13分钟或14分钟都存在，12306目前是30分钟，以前是45分钟。

    2. 数量属性比较强的商品订单

比如，iphone 7、衣服、鞋等商品，基本无时间属性，而数量属性较强，一般 1小时以上2天以内 的待付款时间。

    3. 时间和数量属性都比较弱的商品订单

比如，团购里的套餐、体验券等，使用的时间及数量基本写在使用说明中，这类商品库存程度一般比较低，也就 没有付款倒计时 。

1. 提升用户体验

假如产品设计中没有付款倒计时，在付款流程未完跳出的情况下就会出现两种极端情况：要么立即释放库存，要么永不释放库存。可想而知，这两种极端情况体验是有多么差，我不再举例你也能体会。而正是由于加入了付款倒计时，将这两种极端情况做了平衡。

2. 提高顾客购买率

倒计时本身就具有催促的作用，当顾客看着自己精心挑选的商品，剩余付款时间一秒一秒的减少，顾客心里就会产生“再不付款就没有了”的感觉。

    在产品设计时如何设定剩余付款时间的多少呢？因为业界没有明确统一的规定，我认为只要依据上述提到的三种类型作为参考，依据用户能够顺利付款的平均时间即可。随着付款方式越来越便捷，库存释放的时间也会变化，比如，之前12306的付款时间为45分钟，现在已经改成30分钟。

    最后补充一句，时间属性很强的商品，比如火车票、电影票，除了剩余xx分钟的付款倒计时，还需要提前xx分钟关闭售票、防止恶意占用等设计。

‘柒’ javascript代码,在页面实现倒计时，但不随页面刷新而刷新。

实现倒计时很容易，关键是你要求刷新页面，不能停止倒计时
1、使用iframe，嵌入页面，父页上执行js操作，这样子页面刷新后会接着显示倒计时；
2、在后台实现，如使用java的timer类来实现倒计时，前台通过ajax获取倒计时结果，无论前端页面怎么刷新，不会停止倒计时
前端的好写，简单写下，仅供参考
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body onLoad="startCount()" onUnload="fromClose()">
<iframe id="myFrame" src="innerPage.html" height="500" width="500"></iframe>
</body>
</html>
<script>
var timer;
var count=10;
function startCount(){
timer=window.setInterval("myTimeBack()",1000);
}
function myTimeBack(){
myFrame.document.getElementById("myInput").value=count;
count=count-1;
if(count==0)
count=10;
}
function fromClose(){
clearInterval(timer);
}
</script>
//嵌入的页面innerPage.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<input type="text" value="" id="myInput" style="width:50">
<button onClick="refeshFrame()" style="width:80">refresh</button>
</body>
</html>
<script>
function refeshFrame(){
this.location.href=this.location.toString();
}
</script>