资源描述:
《javascript时间排序算法实现活动秒杀倒计时效果_javascript技巧》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库。
1、javascript时间排序算法实现活动秒杀倒计时效果制做一个活动页面秒杀列表页需要一个时间的算法排序自C琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学他写了个算法给我看了下,刚开始看的时候觉得这就是个纯算法,不能转化成页面的dom效果,可是再看了两遍发现可以,于是我就改了改,实现了,先分享给大家。页面需求是:从11点到20点每隔一个小吋一场秒杀如果是当前吋间就显示正在秒杀之前的商品就往最后排以此类推类似最开始的11点顺序是11,12,13,14,15,16,17,18,19,20
2、(点);到12点的顺序是12,13,14,15,16,17,18,19,20,11(点)到13点的顺序是13,14,15,16,17,18,19,20,12,11(点)OOOOO最后的顺序是20,19,18,17,16,15,13,12,11(点)这是后台同学的那个纯算法functionshow_test(hour){"p=['13dian','14dian,,'15dian','16dian,,'17diem','18dian','19dian','20dian'];console.log(,原顺
3、序是');console,log(p);date二newDate();curHour=date.getHours();pos二curllour-13;//pos=hour;s='活动'+讥pos]+"正在进彳亍";console,log(s);desc二'当前的顺序应该是’;p.reverse();console,log(pos);tmp二[]for(i二0;i4、sole,log(desc);console,log(p);console.log(〃〃);调用varcurllour二newDate().gctllours();show_test(curHour);这个算法完美的实现所需要的那种需求所表述的样子可是问题来了怎么真正的转换为页面,于是琢磨之后我将它完美实现;〃首先定义一个包含了每个秒杀的商品的id和图片的数组imgl是商品图片img2是秒杀时间img3是商品描述vardata=[{id:1,time:11,imgl:l.jpg,img2:,
5、zll.jpg〃,img3:z,lll.jpg"},{id:2,time:12,imgl:"2.jpg",img2:"22.jpg",img3:〃222・jpg"},{id:3,time:13,imgl:"3・jpg",img2:,z33.jpg,z,img3:333.jpg},{id:4,time:14,・-〃片・〃imgl:4・jpg,img2:〃44.jpg〃,img3:"444.jpg"},{id:5,time:15,imgl:5.jpg,img2:,z55.jpg,z,img3:,z555
6、・jpg〃丿,{id:6,time:16,imgl:6.jpg,img2:〃66・jpg〃,img3:〃666・jpg〃},{id:7,time:17,imgl:7.jpg,img2:z,77.jpg",img3:,z777・jpg"},{id:&time:18,imgl:〃&jpg",img2:〃88・jpg",img3:/z888.jpg"},{id:9,time:19,imgl:〃9・jpg",img2:,z99.jpg/z,img3:〃999.jpg〃},{id:10,time:20,img
7、l:,z10.jpg/z,img2:〃101・jpg〃,img3:〃1010.jpg"}];〃对象数组排序functioncompare(propcrtyName){returnfunction(objectl,object2){varvaluel=objectl[propertyName];varvalue2二object2[propertyName];if(value2valuel){return1;}else{rcturn0;}
8、}}〃因为现在的数组已经变成了一个复杂的数组所以排序要用到根据对象的某个属性排序这歌方法〃这个方法在javascript高级程序设计里而冇捉到过functionitemShow(hour){p=data;〃当前时间curHour=hour;//对应吋间的数组下标pos=curllour-11;if(posUO){〃如果没到11点就显示最开始的顺序pos二0;Jelseif(pos>=9){//如果超过20点就完全倒序pos二9}S='活动'+p[pos]+〃正在进行"