Der JavaScript-Zeitsortierungsalgorithmus implementiert den Event-Flash-Countdown-Effekt_Javascript-Fähigkeiten

Das Erstellen einer Flash-Verkaufslistenseite für eine Veranstaltung erfordert viel Zeit für die algorithmische Sortierung. Ich habe lange darüber nachgedacht und verschiedene Algorithmen ausprobiert, konnte es aber nicht herausfinden. Später habe ich den nächsten PHP-Klassenkameraden gefragt Er schrieb einen Algorithmus und zeigte ihn mir. Als ich ihn mir zum ersten Mal ansah, hatte ich das Gefühl, dass es sich um einen reinen Algorithmus handelte, der nicht in den DOM-Effekt der Seite umgewandelt werden konnte erledigt sein, also habe ich es geändert, implementiert und zuerst mit allen geteilt.

Die Seitenanforderungen sind: Von 11 Uhr bis 20 Uhr findet stündlich ein Flash-Sale statt. Wenn es die aktuelle Zeit ist, wird er als Flash-Sale angezeigt, und die vorherigen Produkte werden angezeigt in die letzte Zeile verschoben und so weiter

Eine ähnliche Reihenfolge der ersten 11 Punkte ist 11,12,13,14,15,16,17,18,19,20 (Punkte); Die Reihenfolge bis 12 Uhr ist 12,13,14,15,16,17,18,19,20, 11 (Punkt)
Die Reihenfolge bis 13 Uhr ist
13,14,15,16,17,18,19,20,12,11 (Punkte) . . . . .
Die endgültige Reihenfolge ist 20, 19, 18, 17, 16, 15, 13, 12, 11 (Punkte)
Dies ist der reine Algorithmus der Klassenkameraden im Hintergrund

Anrufen

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");
  }

Dieser Algorithmus setzt die erforderlichen Anforderungen perfekt um, aber es stellt sich die Frage, wie man ihn tatsächlich in eine Seite umwandelt. Nachdem ich darüber nachgedacht hatte, habe ich ihn perfekt implementiert;

var curHour=new Date().getHours();
show_test(curHour);

Dadurch wird der Algorithmus in eine Seitenanzeige implementiert. Ich hoffe, dass jeder etwas gewinnen und den Javascript-Zeitsortierungsalgorithmus verstehen kann.

//首先定义一个包含了每个秒杀的商品的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+"'>")
    }
   } 

   
  }