電商網站支付倒計時前端如何實現

『壹』 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>