php 活动秒杀时间判断,JavaScript_javascript时间排序算法实现活动秒杀倒计时效果,制做一个活动页面 秒杀列表页 - phpStudy...

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

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

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

if(i==0){//正在秒杀

$(".item").eq(0).append("%22+p%5Bi%5D.img1+%22")

$(".item").eq(0).append("%22+%22killsecond_now.jpg%22+%22")

$(".item").eq(0).append("%22+p%5Bi%5D.img3+%22")

}else{

$(".item").eq(i).append("%22+p%5Bi%5D.img1+%22")

$(".item").eq(i).append("%22+p%5Bi%5D.img2+%22")

$(".item").eq(i).append("%22+p%5Bi%5D.img3+%22")

}

}

}

这样就把算法实现成页面展示了,希望大家可以有所收获,理解javascript时间排序算法。相关阅读:

深入mysql慢查询设置的详解

Win10系统自带浏览器无法打开网页怎么办?

Android 权限(permission)整理

JavaScript数组操作函数汇总

浅谈js构造函数的方法与原型prototype

启用Csrf后POST数据时出现的400错误

oracle停止数据库后linux完全卸载oracle的详细步骤

PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法

win7系统电脑共享文件时提示“输入网络密码”的解决方法

win10升级邮政银行网银键盘保护驱动 peckp.sys 阻止升级的解决方法

HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)

C#进阶系列 WebApi身份认证解决方案推荐:Basic基础认证

SQL2000 事务回滚问题探讨

jQuery实现按钮点击遮罩加载及处理完后恢复的效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值