使用vue建立訂單倒計時關閉顯示效果

2021-10-20 09:03:59 字數 1048 閱讀 6360

定義vue變數 

endtime:『』  // 動態倒計時顯示

orderinvalidationtime:『』  //倒計時秒數

vue.$nexttick(function ()

if (minute <= 9) minute = '0' + minute;

if (second <= 9) second = '0' + second;

this.endtime = "訂單關閉:" + hour + ":" + minute + ":" + second;

this.orderinvalidationtime--;

if (this.endtime == "訂單關閉:0:00:00")

}效果函式做完了

開始計算需要倒計時的時間

演算法為:

this.orderinvalidationtime = 後台配置的倒計時秒數 -(系統伺服器時間(s) - 訂單建立時間(s));

注意: 1 獲取服務時間方法 new date($.ajax().getresponseheader("date"));

不要new date(); 瀏覽器時間可以被改動導致和伺服器時間不一致;

2 把所有時間引數轉化毫秒數計算最後再轉化秒;

3 ios時間格式有點特殊需用replace(/-/g, '/')轉化;

下面為案例**:

var date1 = new date(f_oi_order_time.replace(/-/g, '/'));

var date2 = new date($.ajax().getresponseheader("date"));

var date3 = parseint((date2.gettime() - date1.gettime()) / 1000); //相差秒數

var date4 = parseint(f_oi_invalidation_time);

_this.orderinvalidationtime = date4 - date3;此計算也要放在setinterval(this.timer, 1000);執行之前。

vue 寫倒計時

在用vue的遇到乙個問題就是乙個頁面裡面有倒計時的時候,重新整理頁面會從新倒計時,為了不讓計時器從新倒計時。想到了乙個方法。原理時這樣的,吧獲取的當前時間的,加上要倒計時的時間存到localstorage中,也就是說獲取到倒計時結束的時間,存到localstorage中,在用的時候是以結束時間為基礎...

基於vue的倒計時功能

前言 目前在工作中用到的都是以vue框架實現的,本文記錄開發中遇到的功能如何實現的。要求實現乙個活動頁面的倒計時功能。如圖 html changetab assets bg 3x.png alt 背景圖 class bgimg assets time 3x.png alt 計時 class coun...

使用NSTimer實現倒計時

記得以前在看iphone31天的時候做過乙個,今天翻出來執行不了了,原因是我的 iphone sdk公升級到3.1了,以前使用的是2.2.1,在2.2.1裡面是可以使用nscalendardate的,但是在3.1裡面不能夠使用,怎麼辦,只好 用nstimer了,最後還是給實現了。也比較簡單,開始執行...