根据活动时间节点，进行倒计时

目前，集团下属的几百家分店正在如火如荼的进行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){
        function Count(){
            var str = "2017/"+mon+"/"+day+" "+detail;
            var endTime = new Date(str);
            var nowTime = new Date();
            var Difference = parseInt(endTime.getTime()) - parseInt(nowTime.getTime());
            var d = Math.floor(Difference/1000/60/60/24);
            var h = Math.floor(Difference/1000/60/60%24);
            var m = Math.floor(Difference/1000/60%60);
            var s = Math.floor(Difference/1000%60);
            function toTwo( arg ){
                if( arg < 10 ){
                    arg = '0' + arg;
                }
                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 ){
              //前一天
             $("#preday").text(preday);
              //今天
             $("#day").text(day);
             //后一天
             $("#nextday").text(nextday);
             //后两天
             $("#nextday2").text(nextday2);
             
             realDay = nextday;
         }else{
             $("#preday").text(preday-1);
             $("#day").text(preday);
             $("#nextday").text(day);
             $("#nextday2").text(day+1);
             realDay = day;
         }
         $("#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");