javascript时间排序算法实现活动秒杀倒计时效果_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(点)

这是后台同学的那个纯算法

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时间排序算法。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js倒计时
, js活动秒杀倒计时
js秒杀倒计时
javascript排序算法、秒杀倒计时、ios秒杀倒计时代码、淘宝秒杀倒计时代码、秒杀倒计时html代码,以便于您获取更多的相关知识。

时间: 2022-12-20

javascript时间排序算法实现活动秒杀倒计时效果_javascript技巧的相关文章

JS实现的仿淘宝交易倒计时效果_javascript技巧

本文实例讲述了JS实现的仿淘宝交易倒计时效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> var StartTime = new Date("2015/11/11 12:34:03"); document.write("订购时间: " + StartTime.toLocaleDateString() + StartTime.toLocaleTimeString() + "

js实现精确到秒的倒计时效果_javascript技巧

本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下 效果图: 1.倒计时效果  <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>倒计时</title> <link rel="stylesheet" href="css/common.css" type="text/css&quo

js实现新年倒计时效果_javascript技巧

一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的2015年大家都收获了什么? 本文实例讲述了js实现新年倒计时效果代码.分享给大家供大家参考.具体如下: 运行效果图: 具体代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

js实现点击获取验证码倒计时效果_javascript技巧

网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

JS/jQ实现免费获取手机验证码倒计时效果_javascript技巧

最近做了一个项目,其中有项目需求涉及到手机号验证码,就是当用户点击获取验证码之后我们会发送一条信息到用户手机,然后就会出现一个倒计时按钮,很像支付宝手机付款效果了,下面我给大家分享两个实现代码. 如何获取手机验证码? 小月不知道大家是利用什么平台去获取验证码的,但是告诉大家我是在哪个平台获取的. LeanCloud :https://leancloud.cn/ 文档:https://leancloud.cn/docs/sms_guide-js.html 在这个平台首先去要注册一个账号,在设置里面

用Javascript 和 CSS 实现脚注(Footnote)效果_javascript技巧

不过,既然脚注有这些好处,我们当然要在网页中也加以利用,本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法. 复制代码 代码如下: <script type="text/javascript"> // 说明:用 Javascript 和 CSS 实现脚注(Footnote)效果 var footNotes = function(){}; footNotes.prototype = { footNoteClassName : "footnote&

js实现精确到毫秒的倒计时效果_javascript技巧

本文实例为大家分享了精确到毫秒的倒计时效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

javascript+HTML5的Canvas实现Lab单车动画效果_javascript技巧

本文实例讲述了javascript+HTML5的Canvas实现Lab单车动画效果.分享给大家供大家参考.具体如下: 这里运用HTML5实现的单车动画,运行一下效果你就明白了,不过不要在IE8下测试,没效果的.请在支持最新HTML3和CSS3的浏览器下测试,祝您好运. 运行效果截图如下: 具体代码如下: <html> <head> <title>Canvas Lab单车动画,HTML5动画</title> </head> <script t

JavaScript实现横向滑出的多级菜单效果_javascript技巧

本文实例讲述了JavaScript实现横向滑出的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JavaScript横向滑出的多级菜单,只用鼠标放上就可以动画出现二级菜单,整体设计精美,大气,博客上也可以用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hx-show-menu-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit