<!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. 神奇的Object.defineProperty

    vue.js和avalon.js 都是通过它实现双向绑定的. 对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值.定义对象可以使用构造函数或字面量的形式: var obj={}; o ...

  2. win7下安装MySQL 5.7.19（解压缩版）

    1.官网下载地址:https://downloads.mysql.com/archives/community/ 下载后,得到压缩包: 2.解压,我的解压目录为:E:\mysql-5.7.19\mys ...

  3. Angular——内置服务

    $location <!DOCTYPE html> <html lang="en" ng-app="App"> <head> ...

  4. Java 基础入门随笔（11） JavaSE版——继承、覆盖、抽象类

    1.面向对象的特征二:继承 定义: 指一个对象直接使用另一对象的属性和方法. 继承好处: 1.提供代码的复用性. 2.让类与类直接产生了关系,给第三个特征多态提供了前提. java中支持单继承.不直接 ...

  5. day18-常用模块III (numpy、pandas、matplotlib)

    目录 numpy模块 创建矩阵 获取矩阵的行列数 切割矩阵 矩阵元素替换 矩阵的合并 通过函数创建矩阵 矩阵的运算 矩阵的点乘与转置 矩阵的逆 矩阵的其他操作 numpy.random生成随机数 pa ...

  6. 在添加新内容时,creatat没有数据

    首先找到controller中的add方法,然后是执行了Service.insert()方法 然后找到service对应的impl方法, impl方法中的 public void insert(Cus ...

  7. 解决移动端 手机号input 属性为 number，maxlength无效情况

    <input type="number" oninput="if(value.length>11)value=value.slice(0,11)" ...

  8. 散列(hash)

    散列(hash)是常用的算法思想之一,在很多程序中都会有意无意地使用到. 先来看一个简单的问题:给出N个正整数,再给出M个正整数,问这M个数中每个数分别是否在N个数中出现过. 例如N=5,M=3,N个 ...

  9. (C/C++学习)18.C语言双向链表

    说明:数组提供了连续内存空间的访问和使用,而链表是对内存零碎空间的有效组织和使用.链表又分为单向链表和双向链表,单向链表仅提供了链表的单方向访问,相比之下,双向链表则显得十分方便. 一.单向链表的节点 ...

  10. Linux下“任务管理器”

    也不知道linux叫不叫任务管理器. Ctrl+Alt+T打开终端,输入top,就会出现一堆东西. 如果有个东西未响应了,就可以输入k+这个进程的pid就可以杀死它. https://blog.csd ...