目前,集团下属的几百家分店正在如火如荼的进行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");