这篇文章主要介绍了 javascript 时间排序算法实现活动秒杀倒计时效果,即一个页面多个倒计时排序,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的 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(点)
这是后台同学的那个纯算法
- 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 + "'>")
- }
- }
- }
这样就把算法实现成页面展示了,希望大家可以有所收获,理解 javascript 时间排序算法。
来源: http://www.phperz.com/article/17/0222/266755.html