<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jquery高速排序算法动画特效 </title>
  <script language="javascript" src="js/jquery.min.js"></script>
  </head>
  <style>
  *{ margin:0; padding:0;}
  body{ background-color:#666;}
  #box{ width:1000px; height:480px; background-color:#000; margin:0 auto; position:relative; overflow:hidden;}
  #select{ width:1000px; height:50px; line-height:50px; text-align:center; margin:20px auto; font-size:12px; color:#fff;}
  .test{ border:1px solid #CCC; background-color:#fff; position:absolute;bottom:0;}
  .pass{ background-color:#F00;}
  .change{ background-color:#0F3;}
  .changeEnd{ background-color:#FF0;}
  </style>
  <body>
  <div id="box"></div>
  <div id="select">
  算法:<select id="algorithm">
  <option value="1" selected="selected">冒泡算法</option>
  <option value="2">鸡尾酒算法</option>
  <option value="3">插入算法</option>
  </select>
  子元素个数:<select id="num">
  <option value="200" selected="selected" >200</option>
  <option value="150" >150</option>
  <option value="100" >100</option>
  <option value="50" >50</option>
  <option value="10" >10</option>
  </select>
  算法运行速度:<select id="speed">
  <option value="1" selected="selected" >fast</option>
  <option value="5" >normal</option>
  <option value="10" >slow</option>
  <option value="100" >snail</option>
  </select>
  附加动画:<input type="checkbox" id="isAnimat" />
  <input type="button" value="開始" />
  </div>
  <script language="javascript">
  /*
  * 排序算法 js动画演示运算过程. Author:Cui;
  */
  var $isAnimat,$speed;
  $("#select>:button").click(function() {
  //父容器
  var $box = $("#box");
  $box.empty();
  //算法;
  var selects = $("#algorithm").val();
  //附加动画;
  $isAnimat = $('#isAnimat').is(':checked');
  //运行速度
  $speed = $('#speed').val();
  //子元素个数;
  var $max = $("#num").val();
  //子元素宽度;
  var $width = (1e3 - $max * 2) / $max;
  //获取一个随机数数组 length=200(父容器的宽度/元素的宽+边框) 500最大高度,10最小高度;
  var H = getRandom(10, 500, $max);
  //加入演示用容器
  var i = 0;
  var time = window.setInterval(function() {
  if (i >= H.length) {
  window.clearInterval(time);
  selectAnimate(H, selects);
  $("#select").slideUp();
  }
  var $child = $('<div class="test"></div>');
  var height = H[i] + "px";
  var left = i * ($width + 2) + "px";
  $child.css({
  height:height,
  left:left,
  width:$width
  }).appendTo($box);
  i++;
  }, 10);
  });
   
  //选择要运行的动画;
  function selectAnimate(arr, selects) {
  if (selects == 1) {
  bubbleSort(arr);
  }
  if (selects == 2) {
  cocktailSort(arr);
  }
  if (selects == 3) {
  insertSort(arr);
  }
  }
   
  //生成count个 范围在maxs-mins之间不反复的随机数
  function getRandom(mins, maxs, count) {
  if (maxs - mins < count - 1) {
  return false;
  }
  var _this = {
  limit:{
  maxs:maxs,
  mins:mins,
  count:count
  },
  rondomArr:[]
  };
  _this.randomFunc = function() {
  return parseInt(Math.random() * (_this.limit.maxs - _this.limit.mins + 1) + _this.limit.mins);
  };
  _this.in_array = function(val) {
  for (var i = 0; i < _this.rondomArr.length && _this.rondomArr[i] != val; i++) ;
  return !(i == _this.rondomArr.length);
  };
  _this.getRandomArr = function() {
  for (var i = 0; i < _this.limit.count; i++) {
  var val = _this.randomFunc();
  if (_this.in_array(val)) {
  i--;
  } else {
  _this.rondomArr.push(val);
  }
  }
  return _this.rondomArr;
  };
  return _this.getRandomArr();
  }
   
  //冒泡算法动画;
  function bubbleSort(arr) {
  var i = arr.length, j;
  var tempExchangVal;
  var timeDo = function() {
  var time1 = window.setTimeout(function() {
  if (i > 0) {
  j = 0;
  var time2 = window.setInterval(function() {
  if (j < i - 1) {
  changeBox(j, "pass");
  if (arr[j] > arr[j + 1]) {
  tempExchangVal = arr[j];
  arr[j] = arr[j + 1];
  arr[j + 1] = tempExchangVal;
  //演示用容器;
  changeBox(j, "changeEnd", arr[j]);
  changeBox(j + 1, "change", tempExchangVal);
  }
  j++;
  } else {
  window.clearInterval(time2);
  removeBoxColor();
  i--;
  timeDo();
  }
  }, $speed);
  } else {
  //结束;
  doEnd(arr);
  }
  }, $speed);
  };
  timeDo();
  }
   
  //鸡尾酒算法动画;
  function cocktailSort(arr) {
  var i = 0, j;
  var timedo = function() {
  var time = window.setTimeout(function() {
  if (i < arr.length / 2) {
  j = i;
  var time2 = window.setInterval(function() {
  if (j >= arr.length - i - 1) {
  window.clearInterval(time2);
  var k = arr.length - i;
  var time3 = window.setInterval(function() {
  if (k <= i) {
  removeBoxColor();
  window.clearInterval(time3);
  timedo();
  }
  changeBox(k, "pass");
  if (arr[k] > arr[k + 1]) {
  var temp = arr[k];
  arr[k] = arr[k + 1];
  arr[k + 1] = temp;
  changeBox(k, "changeEnd", arr[k]);
  changeBox(k + 1, "change", temp);
  }
  k--;
  }, $speed);
  }
  changeBox(j, "pass");
  if (arr[j] < arr[j - 1]) {
  var temp = arr[j];
  arr[j] = arr[j - 1];
  arr[j - 1] = temp;
  changeBox(j - 1, "changeEnd", temp);
  changeBox(j, "change", arr[j]);
  }
  j++;
  }, $speed);
  } else {
  doEnd(arr);
  }
  i++;
  }, $speed);
  };
  timedo();
  }
   
  //插入算法
  function insertSort(arr) {//插入算法;
  var i = 1;
  var timedo = function() {
  var time = window.setTimeout(function() {
  if (i < arr.length) {
  var tmp = arr[i];
  var key = i - 1;
  removeBoxColor();
  var time2 = window.setInterval(function(){
  changeBox(i, "pass");
  if(key >= 0 && tmp < arr[key]){
  arr[key + 1] = arr[key];
  changeBox(key + 1, "change", arr[key]);
  key--;
  }else{
  if (key + 1 != i) {
  arr[key + 1] = tmp;
  changeBox(key + 1, "changeEnd", tmp);
  }
  window.clearInterval(time2);
  timedo();
  }
  },$speed);
  }else{
  doEnd(arr);
  }
  i++;
  }, $speed);
  }
  timedo();
   
  }
   
   
  //改变容器颜色及其高度;
  function changeBox(index, className, height) {
  if (arguments[2]) {
  if($isAnimat){
  var $thisSpeed = 10*$speed;
  $(".test").eq(index).animate({height:height},$thisSpeed).addClass(className);
  }else{
  $(".test").eq(index).height(height).addClass(className);
  }
  } else {
  $(".test").eq(index).removeClass("change changeEnd").addClass(className);
  }
  }
   
  //清除容器颜色
  function removeBoxColor() {
  $(".test").removeClass("pass change changeEnd");
  }
   
  //结束动画
  function doEnd(arr) {
  removeBoxColor();
  var i = 0;
  var time = window.setInterval(function() {
  if (i >= arr.length) {
  window.clearInterval(time);
  $("#select").slideDown();
  }
  $(".test").eq(i).addClass("change").next().addClass("pass");
  i++;
  }, 5);
  }
   
  /**************算法原型*****************/
  function prototype_bubbleSort(arr) {
  //冒泡;
  var i = arr.length, j;
  var tempExchangVal;
  while (i > 0) {
  for (j = 0; j < i - 1; j++) {
  if (arr[j] > arr[j + 1]) {
  tempExchangVal = arr[j];
  arr[j] = arr[j + 1];
  arr[j + 1] = tempExchangVal;
  }
  }
  i--;
  }
  return arr;
  }
   
  function prototype_cocktailSort(arr) {
  //鸡尾酒
  for (var i = 0; i < arr.length / 2; i++) {
  //将最小值排到队头
  for (var j = i; j < arr.length - i - 1; j++) {
  if (arr[j] < arr[j - 1]) {
  var temp = arr[j];
  arr[j] = arr[j - 1];
  arr[j - 1] = temp;
  }
  }
  //将最大值排到队尾
  for (var j = arr.length - i; j > i; j--) {
  if (arr[j] > arr[j + 1]) {
  var temp = arr[j];
  arr[j] = arr[j + 1];
  arr[j + 1] = temp;
  }
  }
  }
  return arr;
  }
   
  function prototype_insertSort(arr) {//插入算法;
  for (var i = 1; i < arr.length; i++) {
  var tmp = arr[i];
  var key = i - 1;
  while (key >= 0 && tmp < arr[key]) {
  arr[key + 1] = arr[key];
  key--;
  }
  if (key + 1 != i) arr[key + 1] = tmp;
  }
  return arr;
  }
  /**************算法原型*End***************/
   
  </script>
  <div style="text-align:center;clear:both;">
  <script src="/gg_bd_ad_720x90.js"
type="text/javascript"></script>
  <script src="/follow.js"
type="text/javascript"></script>
  </div>
   
  </body>
  </html>

http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代码的更多相关文章

  1. 九大排序算法Demo

    1. 冒泡排序 冒泡排序(Bubble Sort)是一种简单的排序算法.它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来.走访数列的工作是重复地进行直到没有再需要交换, ...

  2. Java 实现的各种经典的排序算法小Demo

    由于有上机作业,所以就对数据结构中常用的各种排序算法都写了个Demo,有如下几个: 直接插入排序 折半插入排序 希尔排序 冒泡排序 快速排序 选择排序 桶排序 Demo下载地址 下面谈一谈我对这几个排 ...

  3. Spring Web Flow 入门demo（二）与业务结合 附源代码

    第一部分demo仅仅介绍了简单的页面跳转,接下来我们要实现与业务逻辑相关的功能. 业务的逻辑涉及到数据的获取.传递.保存.相关的业务功能函数的调用等内容,这些功能的实现都可用Java 代码来完毕,但定 ...

  4. $(dom).each(index,ele){} 真正的jquery对象

    1.$(ele)才是each真正的jquery对象,而不是ele.$('.mt-story-info').each(function(index,ele){ if($('.mt-story-info' ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  7. CSS3/jQuery自己定义弹出窗体

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  8. 纯CSS实现delay连续动画

    从前css3还没出来的时候,用jquery的delay方法可以串起一个一个独立的动画片段. 那么在不使用jquery的平台上,如何借助css3来完成一些列动作呢? 有高人做了一个动感十足的人物动画: ...

  9. CSS3 模拟笑脸

    参考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.html 它还做了舌头... 一开始我都是用JS实现的动画  当然了  眼 ...

随机推荐

  1. Python_购物车问题

    import os goods = [    {"name": "电脑", "price": 1999},    {"name&q ...

  2. SpringMvc下的文件上传

    首先是springmvc.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&q ...

  3. UVM基础之------uvm phases机制

    代码的书写顺序会影响代码的实现,在不同的时间做不同的事情,这是UVM phase的设计哲学,UVM phase提供了一个通用的TB phase 解决方案.支持显示的隐式的同步方案,运行时刻的线程控制和 ...

  4. 【笔记JS/HTML/CSS】web中的HTTP协议（1）

    最近都在coursera刷课,加上自己课业也忙起来了,总是忘记写学习笔记ORZ 自省ing... 在写HTML的时候,form表单需要通过HTTP协议向服务器提交.查询数据(如下图) 客户端通过HTT ...

  5. （转）淘淘商城系列——导入商品数据到索引库——Service层

    http://blog.csdn.net/yerenyuan_pku/article/details/72894187 通过上文的学习,我相信大家已经学会了如何使用Solrj来操作索引库.本文我们将把 ...

  6. Objective-C中copy 、retain以及ARC中新加入的strong、weak关键字的含义

    copy: 创建一个引用计数为1的对象,然后释放旧的对象 retain:释放旧的对象,将旧对象的值赋予输入对象,再提高输入对象的引用计数为 1 Copy其实是建立了一个相同的对象,而retain不是: ...

  7. Java 8 和 Java 9部分区别

    Java 8 和 Java 9中 concurrent 包有了一些改变, 本文对这些改变做了汇总.Java 8 中 Concurrent package的改变java.util.concurrent中 ...

  8. ORACLE索引介绍和使用

    1．什么是索引 索引是建立在表的一列或多个列上的辅助对象,目的是加快访问表中的数据: Oracle存储索引的数据结构是B*树,位图索引也是如此,只不过是叶子节点不同B*数索引: 索引由根节点.分支节点 ...

  9. 原来 JS 是这样的 - 关于 this

    引子 习惯了别的语言的思维习惯而不专门了解 JavaScript 的语言特性的话,难免踩到一些坑. 上一篇文章 中简单总结了关于 提升, 严格模式, 作用域 和 闭包 的几个常见问题,当然这仅仅是了解 ...

  10. C++/C union使用记一下锅

    //首先,学习编程一定要记得加几个群或者加几个讨论组,因为这样你才能不断地进步还有吵架/滑稽 记一下 关于使用union结构体时遇到的一些坑 To zero-initialize an object ...