javascript时间排序算法实现活动秒杀倒计时效果


Posted in Javascript onJanuary 28, 2021

制做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的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时间排序算法。

Javascript 相关文章推荐
用javascript控制iframe滚动的代码
Apr 10 Javascript
JavaScript的Cookies
Jan 16 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
js querySelector() 使用方法
Dec 21 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
May 22 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 #Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 #Javascript
jquery实现文本框textarea自适应高度
Mar 09 #Javascript
分享12个实用的jQuery代码片段
Mar 09 #Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 #Javascript
javascript html5移动端轻松实现文件上传
Mar 27 #Javascript
javascript事件绑定学习要点
Mar 09 #Javascript
You might like
ThinkPHP采用模块和操作分析
2011/04/18 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
大学应届毕业生个人求职信
2013/09/23 职场文书
幼儿园家长寄语
2014/04/02 职场文书
小学生操行评语大全
2014/04/22 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
单位绩效考核方案
2014/05/11 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
Apache POI的基本使用详解
2021/11/07 Servers
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js