根據活動時間節點，進行倒計時

目前，集團下屬的幾百家分店正在如火如荼的進行20周年店慶活動，我們這些網際網路部門當然也不能閒著，索性，就把專案中遇到的一些小的東西，分享給大家，也記錄一下足跡。（木有在部落格上記錄日常，竟然被同事深深的鄙視了 == 、情何以堪吶~）

產品設計原型上，有乙個倒計時的版塊。由於活動是第一天上午十點開始，第二天上午十點結束。根據這個節點，來進行倒計時。活動後台開發快完成了，才知道是這麼個節點，後台小夥伴本以為是12點開始結束，然後，後台兄弟就炸鍋了，都開發完了才說明白，不知道早點說嘛，云云......開始吐槽了。不過，產品原型對應實際業務流程，然後，後台依照產品原型，再在後台原型的基礎上進行後台活動配置和開發........云云........怪就怪你沒弄清楚專案流程

好啦，不管後台怎麼樣，現在講究的是前後端分離，後台夥伴根據介面吐資料就得了。別的別管那麼多。都讓開，讓我上。。。。。

首先來說，倒計時格式是這樣的 dd:hh:mm:ss,拿到產品原型，一看，不就是個倒計時嗎，分分鐘秒殺它，這讓我忽視了諸多細節問題。

在結構上來說，有兩種html

第一種：

<
p>dd:hh:mm:ss
p>

第二種：

<
p><
span
>dd
span
>:<
span
>hh
span
>:<
span
>mm
span
>:<
span
>ss
span
>
p>

在**中，這兩種結構實際靜態展示的時候幾乎沒有任何本質的區別，但是，體現在實際倒計時展示中，就有細微差別了，第一種，在倒計時進行時，由於0-9這幾個數字的大小有區別，所以，倒計時進行中，整個結構會有輕微的抖動，這就帶來的體驗上的問題。第二種，當對span標籤設定了寬高，讓各個span標籤盒模型都具有一定的空間來容納0-9的體積，並有一定的間隔，那麼就會去除抖動上的不好體驗。

開發中，也遇到了另乙個問題，就是關於時間的問題。有兩方面，就是根據當前時間，顯示時間選單,並根據時間節點，設定倒計時的結束時間。

時間選單是根據當前時間+活動開始結束時間來顯示的，由兩方面控制。所以，在進行日期展示的時候，應當判斷當前時間是否是過了10:00，如果過了10點，則顯示當前時間正在進行中，如果沒有，則顯示前一天的時間正在進行中。活動倒計時同理，如果過了10點，則調整倒計時為nextday，如果沒有過，則調整為day。

css就此省略。

<
p class
="actwran"
>
<
span
>距離本場結束
span
>
<
span 
id="dd2"
class
="timespan"
>
span
>
:<
span 
id="hh2"
class
="timespan"
>
span
>
:<
span 
id="mm2"
class
="timespan"
>
span
>
:<
span 
id="ss2"
class
="timespan"
>
span
>
p>

//
倒計時封裝
function
timer(mon,day,detail,id1,id2,id3,id4)
return
arg;
}document.getelementbyid(id1).innerhtml =totwo(d);
document.getelementbyid(id2).innerhtml =totwo(h);
document.getelementbyid(id3).innerhtml =totwo(m);
document.getelementbyid(id4).innerhtml =totwo(s);
}count();    
setinterval(count,1000);
};//日期選單展示
var mon = new date().getmonth()+1,
day = new
date().getdate(),
preday = day-1,
nextday = day+1,
nextday2 = day+2,
realday;
//如果超過十點
if(new date().gethours() >=10)
else
$("#month").text(mon);
$("#premonth").text(mon);
$("#nextmonth").text(mon);
$("#nextmonth2").text(mon);
timer(mon,realday,"10:00:00","dd2","hh2","mm2","ss2");
timer(mon,nextday,"10:00:00","dd3","hh3","mm3","ss3");
timer(mon,nextday2,"10:00:00","dd4","hh4","mm4","ss4");

根據活動時間節點，進行倒計時

js根據時間戳倒計時

時間倒計時

時間倒計時

根據活動時間節點，進行倒計時

js根據時間戳倒計時

時間倒計時

時間倒計時

相關推薦