這篇文章主要介紹了javascript時間排序算法實(shí)現(xiàn)活動秒殺倒計(jì)時效果，即一個頁面多個倒計(jì)時排序，感興趣的小伙伴們可以參考一下
制做一個活動頁面 秒殺列表頁 需要一個時間的算法排序 自己琢磨了半天想了各種算法也沒搞出來，后來問了下一個后臺的php同學(xué) 他寫了個算法給我看了下 ，剛開始看的時候覺得這就是個純算法，不能轉(zhuǎn)化成頁面的dom效果，可是再看了兩遍發(fā)現(xiàn)可以， 于是我就改了改，實(shí)現(xiàn)了，先分享給大家。
頁面需求是：從11點(diǎn)到20點(diǎn) 每隔一個小時一場秒殺 如果是當(dāng)前時間就顯示正在秒殺 之前的商品就往最后排 以此類推
類似最開始的11點(diǎn)順序是 11,12,13,14,15,16,17,18,19,20（點(diǎn)）；
到12點(diǎn)的順序是 12,13,14,15,16,17,18,19,20，11（點(diǎn)）
到13點(diǎn)的順序是 13,14,15,16,17,18,19,20，12,11（點(diǎn)）
。。。。。
最后的順序是 20，19，18，17，16，15，13，12，11（點(diǎn)）
這是后臺同學(xué)的那個純算法
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]+"正在進(jìn)行";
console.log(s);
desc = '當(dāng)前的順序應(yīng)該是';
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");
}
調(diào)用
var curHour=new Date().getHours();
show_test(curHour);
這個算法完美的實(shí)現(xiàn)所需要的那種需求所表述的樣子 可是問題來了 怎么真正的轉(zhuǎn)換為頁面，于是琢磨之后我將它完美實(shí)現(xiàn);
//首先定義一個包含了每個秒殺的商品的id和圖片的數(shù)組 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"
}
];
//對象數(shù)組排序
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;
}
}
}
//因?yàn)楝F(xiàn)在的數(shù)組已經(jīng)變成了一個復(fù)雜的數(shù)組 所以排序要用到根據(jù)對象的某個屬性排序這歌方法
//這個方法在javascript高級程序設(shè)計(jì)里面有提到過
function itemShow(hour)
{
p=data;
//當(dāng)前時間
curHour = hour;
//對應(yīng)時間的數(shù)組下標(biāo)
pos = curHour - 11;
if(pos<=0){ //如果沒到11點(diǎn)就顯示最開始的順序
pos=0;
}else if(pos>=9){//如果超過20點(diǎn) 就完全倒序
pos=9
}
s = '活動'+ p[pos]+"正在進(jìn)行";
console.log(s);
//根據(jù)數(shù)組里的 時間這個屬性反向排序
p.reverse(compare("time"));
console.log(pos);
console.log(p);
//定義一個臨時數(shù)組存放過時的商品項(xiàng)
tmp = []
for(i = 0 ; i<pos; i++){
tmp.push(p.pop());
}
//將剩余的再反相排序
p.reverse(compare("time"));
//將未到秒殺時間的商品項(xiàng)目與已經(jīng)過期的數(shù)組鏈接
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+"'>")
}
}
}
這樣就把算法實(shí)現(xiàn)成頁面展示了，希望大家可以有所收獲，理解javascript時間排序算法。