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

时间: 2016-03-08

js的各种排序算法实现(总结)

如下所示: // ---------- 一些排序算法 var Sort = {} Sort.prototype = { // 利用sort进行排序 systemSort:function(array){ return array.sort(function(a, b){ return a - b; }); }, // 冒泡排序 bubbleSort:function(array){ var i = 0, len = array.length, j, d; for(; i<len; i++){ f

JavaScript中九种常用排序算法

笔试面试经常涉及各种算法,本文简要介绍常用的一些算法,并用JavaScript实现. 一.插入排序 1)算法简介 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已排序元素逐步向后挪位,为最新元素提供插入空间. 2)算法描述和实现 一般来说,插入排序都采

Javascript快速排序算法详解

快速排序是对冒泡排序的一种改进.通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,最终达到整个数据变成有序序列. 假设要排序的数组是A[0]--A[N-1],首先任意选取一个数据(通常选用数组的第一个数)作为基准数据,然后将所有比它小的数都放到它前面,所有比它大的数都放到它后面,这个过程称为一趟快速排序.值得注意的是,快速排序不是一种稳定的排序算法,也就是说,多个相同的值的相对

JavaScript希尔排序、快速排序、归并排序算法

以var a = [4,2,6,3,1,9,5,7,8,0];为例子. 1.希尔排序. 希尔排序是在插入排序上面做的升级.是先跟距离较远的进行比较的一些方法. function shellsort(arr){ var i,k,j,len=arr.length,gap = Math.ceil(len/2),temp; while(gap>0){ for (var k = 0; k < gap; k++) { var tagArr = []; tagArr.push(arr[k]) for (i

JS及PHP代码编写八大排序算法

从学习数据结构开始就接触各种算法基础,但是自从应付完考试之后就再也没有练习过,当在开发的时候也是什么时候使用什么时候去查一下,现在在学习JavaScript,趁这个时间再把各种基础算法整理一遍,分别以JS和PHP语法的方式编写代码. 1.冒泡排序 原理:临近的数字两两进行比较,按照从小到大或者从大到小的顺序进行交换,这样一趟过去后,最大或最小的数字被交换到了最后一位,然后再从头开始进行两两比较交换,直到倒数第二位时结束 时间复杂度:平均情况:O(n2)  最好情况:O(n) 最坏情况:O(n2)

JS随机洗牌算法之数组随机排序

推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 洗牌算法是一个比较形象的术语,本质上让一个数组内的元素随机排列.举例来说,我们有一个如下图所示的数组,数组长度为 9,数组内元素的值顺次分别是 1~9: 从上面这个数组入手,我们要做的就是打乱数组内元素的顺序: 代码实现 维基百科上的 Fisher–Yates shuffle 词条对洗牌算法做了详细介绍,下面演示的算法也是基于其中的理论编写的: A

JavaScript实现多种排序算法

笔试面试经常涉及各种算法,本文简要介绍常用的一些算法,并用JavaScript实现. 1.插入排序 1)算法简介 插入排序(Insertion-Sort)的算法描述是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-place排序(即只需用到O(1)的额外空间的排序),因而在从后向前扫描过程中,需要反复把已排序元素逐步向后挪位,为最新元素提供插入空间. 2)算法描述和实现 一般来说,插入排序都采

Javascript堆排序算法详解

堆排序分为两个过程: 1.建堆. 堆实质上是完全二叉树,必须满足:树中任一非叶子结点的关键字均不大于(或不小于)其左右孩子(若存在)结点的关键字. 堆分为:大根堆和小根堆,升序排序采用大根堆,降序排序采用小根堆. 如果是大根堆,则通过调整函数将值最大的节点调整至堆根. 2.将堆根保存于尾部,并对剩余序列调用调整函数,调整完成后,再将最大跟保存于尾部-1(-1,-2,...,-i),再对剩余序列进行调整,反复进行该过程,直至排序完成. 复制代码 代码如下: //调整函数 function head

几种经典排序算法的JS实现方法

一.冒泡排序 function BubbleSort(array) { var length = array.length; for (var i = length - 1; i > 0; i--) { //用于缩小范围 for (var j = 0; j < i; j++) { //在范围内进行冒泡,在此范围内最大的一个将冒到最后面 if (array[j] > array[j+1]) { var temp = array[j]; array[j] = array[j+1]; arra

Javascript冒泡排序算法详解

比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最后一个. 持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较. 复制代码 代码如下: function sort(elements){   for(var i=0;i<elements.length-1;i++){     for(var j=0;j<elements.length-i-

C语言 冒泡排序算法详解及实例

C语言 冒泡排序算法 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端. 冒泡排序对n个项目需要O(n2)的比较次数,且可以原地排序.尽管这个算法是最简单了解和实作的排序算法之一,但它对于少数元素之外的数列排序是很没有效率的. 冒泡排序是与插入排序拥有相等的执

java 算法之冒泡排序实例详解

java 算法之冒泡排序实例详解 无人不知无人不晓的冒泡排序,据说是模仿泡泡从水中浮起跑到水面的过程. 在要排序的一组数中,对当前还未排好序的范围内的全部数,自上而下对相邻的两个数依次进行比较和调整,让较大的数往下沉,较小的往上冒.即: 每当两相邻的数比较后发现它们的排序与排序要求相反时,就将它们互换. 来看一下代码: package cn.songxinqiang.study.algorithm.sort; import java.util.Arrays; /** * 冒泡排序 * * <p>

python算法与数据结构之冒泡排序实例详解

一.冒泡排序介绍 冒泡排序(英语:Bubble Sort)是一种简单的排序算法.它重复地遍历要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.遍历数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端. 二.冒泡排序原理 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素做同样的工作,从开始第一对到结尾的最后一对.这一步做完,最后的元素应该会是最大的数. 针对所有的

Js面试算法详解

素数 Q:你将如何验证一个素数? A:一个素数只能被它自己和1整除.所以,我将运行一个while循环并加1.(看代码示例,如果你无法理解,那这不是你的菜.先回去学习javaScript基础知识然后再回来吧.) 方法1 function isPrime(n){ var divisor = 2; while (n > divisor){ if(n % divisor == 0){ return false; } else divisor++; } return true; } isPrime(137

python算法演练_One Rule 算法(详解)

这样某一个特征只有0和1两种取值,数据集有三个类别.当取0的时候,假如类别A有20个这样的个体,类别B有60个这样的个体,类别C有20个这样的个体.所以,这个特征为0时,最有可能的是类别B,但是,还是有40个个体不在B类别中,所以,将这个特征为0分到类别B中的错误率是40%.然后,将所有的特征统计完,计算所有的特征错误率,再选择错误率最低的特征作为唯一的分类准则--这就是OneR. 现在用代码来实现算法. # OneR算法实现 import numpy as np from sklearn.da

javascript 面向对象function详解及实例代码

javascript 面向对象function详解     js中的函数有三种表示方式: //函数的第一种表示方式:函数关键字的方式 function f1() { alert("f1"); } //函数的第二种表示方式:函数字面量的方式 var f2 = function() { alert("f2"); } //函数的第三种表示方式:构造函数的方式 var f3 = new Function('var a = 100; b = 200; return a+b;'

Kotlin 语言中调用 JavaScript 方法实例详解

Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J