javascript 一個關於時間排序的演算法（一個頁面多個倒計時排序）

標籤：

上周要做一個活動頁面 秒殺列表頁 需要一個時間的演算法排序 自己琢磨了半天想了各種演算法也沒搞出來，後來問了下一個背景php同學 他寫了個演算法給我看了下 ，剛開始看的時候覺得這就是個純演算法，不能轉化成頁面的dom效果，可是再看了兩遍發現可以 於是我就改了改 實現了 不禁感歎 確實蠻贊的 於是就博一客； 
 

頁面需求是：從11點到20點 每隔一個小時一場秒殺 如果是目前時間就顯示正在秒殺 之前的商品就往最後排 以此類推

類似最開始的11點順序是 11,12,13,14,15,16,17,18,19,20（點）；
到12點的順序是 12,13,14,15,16,17,18,19,20，11（點）
到13點的順序是 13,14,15,16,17,18,19,20，12,11（點）
。。。。。
最後的順序是 20，19，18，17，16，15，13，12，11（點）

 

頁面demo請掃碼

這是後台同學的那個純演算法

function show_test(hour)        {            p = [‘13 dian‘,‘14 dian‘,‘15 dian ‘,‘16 dian‘,‘17 dian‘,‘18 dian‘,‘19 dian‘,‘20 dian‘];            console.log(‘原順序是‘);            console.log(p);            date = new Date();            curHour = date.getHours();            pos = curHour - 13;            //pos = hour;            s = ‘活動‘+ p[pos]+"進行中";            console.log(s);            desc = ‘當前的順序應該是‘;            p.reverse();            console.log(pos);                    tmp = []            for(i = 0 ; i<pos; i++){                tmp.push(p.pop());            }            p.reverse();            p = p.concat(tmp.reverse());            console.log(desc);            console.log(p);            console.log("\n\n");        }調用var curHour=new Date().getHours();show_test(curHour);

這個演算法完美的實現所需要的那種需求所表述的樣子 可是問題來了 怎麼真正的轉換為頁面，於是琢磨之後我將它完美實現;

//首先定義一個包含了每個秒殺的商品的id和圖片的數組 img1是商品圖片 img2是秒殺時間 img3是商品描述var data=[  { id:1,    time:11,    img1:"1.jpg",    img2:"11.jpg",    img3:"111.jpg"       },  { id:2,    time:12,    img1:"2.jpg",    img2:"22.jpg",    img3:"222.jpg"       },  { id:3,    time:13,    img1:"3.jpg",    img2:"33.jpg",    img3:"333.jpg"       },  { id:4,    time:14,    img1:"4.jpg",    img2:"44.jpg",    img3:"444.jpg"  },  { id:5,    time:15,    img1:"5.jpg",    img2:"55.jpg",    img3:"555.jpg"  },  { id:6,    time:16,    img1:"6.jpg",    img2:"66.jpg",    img3:"666.jpg"  },  { id:7,    time:17,    img1:"7.jpg",    img2:"77.jpg",    img3:"777.jpg"  },  { id:8,    time:18,    img1:"8.jpg",    img2:"88.jpg",    img3:"888.jpg"  },  { id:9,    time:19,    img1:"9.jpg",    img2:"99.jpg",    img3:"999.jpg"  },  { id:10,    time:20,    img1:"10.jpg",    img2:"101.jpg",    img3:"1010.jpg"  }  ];//對象數組排序 function compare(propertyName) {   return function (object1, object2) {     var value1 = object1[propertyName];     var value2 = object2[propertyName];     if (value2 < value1) {       return -1;     }else if (value2 > value1) {        return 1;     }else {        return 0;     }   } } //因為現在的數組已經變成了一個複雜的數組 所以排序要用到根據對象的某個屬性排序這歌方法//這個方法在javascript進階程式設計裡面有提到過  function itemShow(hour)        {            p=data;           //目前時間            curHour = hour;             //對應時間的數組下標            pos = curHour - 11;            if(pos<=0){ //如果沒到11點就顯示最開始的順序                pos=0;            }else if(pos>=9){//如果超過20點 就完全倒序                pos=9            }            s = ‘活動‘+ p[pos]+"進行中";            console.log(s);            //根據數組裡的 時間這個屬性反向排序            p.reverse(compare("time"));            console.log(pos);            console.log(p);            //定義一個臨時數組存放過時的商品項            tmp = []            for(i = 0 ; i<pos; i++){                tmp.push(p.pop());            }            //將剩餘的再反相排序            p.reverse(compare("time"));            //將未到秒殺時間的商品項目與已經到期的數組連結            p = p.concat(tmp.reverse(compare("time"))); //            console.log(desc);            console.log(p);            for(var i=0;i<data.length;i++){              if(i==0){//正在秒殺                 $(".item").eq(0).append("<img src=‘"+p[i].img1+"‘ id="+p[i].id+">")                $(".item").eq(0).append("<img src=‘"+"killsecond_now.jpg"+"‘>")                $(".item").eq(0).append("<img src=‘"+p[i].img3+"‘>")              }else{                $(".item").eq(i).append("<img src=‘"+p[i].img1+"‘ id="+p[i].id+">")                $(".item").eq(i).append("<img src=‘"+p[i].img2+"‘>")                $(".item").eq(i).append("<img src=‘"+p[i].img3+"‘>")              }            }                    }

這樣就把演算法實現成頁面展示了 看來演算法還是要加強 可能我轉化的這種方式還不夠完美 但依然能感受到演算法之美
這是那個演算法的php小夥伴：blog.csdn.net/typeof_

javascript 一個關於時間排序的演算法（一個頁面多個倒計時排序）