上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的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 一个关于时间排序的算法(一个页面多个倒计时排序)的更多相关文章

  1. c# 一个关于时间截断的算法取巧

    场景如下: 在某一段时间内(有规律,以一个星期为最大区间),从一个时间区间中排除另外一个或者多个时间区间后,返回时间区间集合. 举例如下: //时间区间:2018-02-01~2018-02-07 / ...

  2. 贝叶斯个性化排序(BPR)算法小结

    在矩阵分解在协同过滤推荐算法中的应用中,我们讨论过像funkSVD之类的矩阵分解方法如何用于推荐.今天我们讲另一种在实际产品中用的比较多的推荐算法:贝叶斯个性化排序(Bayesian Personal ...

  3. C#生成一个按时间排序的DUID

    /// <summary> /// 创建一个按时间排序的Guid /// </summary> /// <returns></returns> publ ...

  4. JavaScript 数据结构与算法之美 - 十大经典排序算法汇总(图文并茂)

    1. 前言 算法为王. 想学好前端,先练好内功,内功不行,就算招式练的再花哨,终究成不了高手:只有内功深厚者,前端之路才会走得更远. 笔者写的 JavaScript 数据结构与算法之美 系列用的语言是 ...

  5. JavaScript基于时间的动画算法

    转自:https://segmentfault.com/a/1190000002416071 前言 前段时间无聊或有聊地做了几个移动端的HTML5游戏.放在不同的移动端平台上进行测试后有了诡异的发现, ...

  6. javascript数据结构与算法--高级排序算法(快速排序法,希尔排序法)

    javascript数据结构与算法--高级排序算法(快速排序法,希尔排序法) 一.快速排序算法 /* * 这个函数首先检查数组的长度是否为0.如果是,那么这个数组就不需要任何排序,函数直接返回. * ...

  7. javascript数据结构与算法--基本排序算法(冒泡、选择、排序)及效率比较

    javascript数据结构与算法--基本排序算法(冒泡.选择.排序)及效率比较 一.数组测试平台. javascript数据结构与算法--基本排序(封装基本数组的操作),封装常规数组操作的函数,比如 ...

  8. 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)

    整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...

  9. JS垃圾回收——和其他语言一样,JavaScript 的 GC 策略也无法避免一个问题:GC 时,停止响应其他操作,这是为了安全考虑

    JavaScript 内存管理 & 垃圾回收机制 标记清除 js 中最常用的垃圾回收方式就是标记清除.当变量进入环境时,例如,在函数中声明一个变量,就将这个而变量标记为“进入环境”.从逻辑上讲 ...

随机推荐

  1. RabbitMQ 3.6 安装

    1. 首先安装这个 http://www.erlang.org/downloads 2. 再安装这个 http://www.rabbitmq.com/install-windows.html 3. 添 ...

  2. 研究Dropbox Server端文件系统

    一.传统文件系统 可以理解成两部分:1.真正的storage区,被分割成n个扇区:2.文件系统,其实就是一个FAT表. 二.Dropbox的文件系统 例如,一个modeo.mov的文件,大小为15M. ...

  3. windows_phone指定时间后执行函数

    开发windows phone 应用程序时需要在一段指定的时间后执行某些函数,于是乎想到了通过DispatcherTimer类来实现,再在.Tick后面添加自己想要的事件 DispatcherTime ...

  4. jquery中如何退出each循环

    在for循环中我们用continue退出当前循环,进入下一循环.用break跳出所有循环. 可是在jQuery中却并没有这两条命令,那么如何退出each循环呢? 经过查询得知: 在jQuery中用 r ...

  5. HDOJ 2079 选课时间(母函数)

    选课时间(题目已修改,注意读题) Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  6. 彻底理解js中this的指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  7. javascript设计模式--状态模式(State)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. close和shutdown的区别

    转的,没验证 close(sock_fd)会把sock_fd的内部计数器减1当sock_fd的内部计数器为0时, 才调用shutodwn(), 并最终释放文件描述符调用shutdown()只是进行了T ...

  9. racle 11g impdp时 报ORA-12899

    racle 11g impdp时 报ORA-12899 (2012-07-16 16:42:12) 转载▼ 标签: oracle imp impdp it 分类: oracle技术-开发 源库ZHS1 ...

  10. 使用Varnish代替Squid做网站缓存加速器的详细解决方案----转载

    [文章作者:张宴 本文版本:v1.2 最后修改:2008.01.02 转载请注明出处:http://blog.s135.com] 我曾经写过一篇文章──<初步试用Squid的替代产品──Varn ...