<!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. LR接口测试---socket

    前提条件: 编译:javac TcpServer.java 启动:java TcpServer ============================================ 代码示例: # ...

  2. 字符集编码---3 Windows BOM

    Windows平台下存储Unicode格式的文件时,会在文件头插入2到3字节的文件头.这个文件头就是BOM(Byte Order Marks). 这个文件头在Unicode中,无对应符号.所以不必担心 ...

  3. 梦想MxWeb3D协同设计平台 2019.01.24更新

    SDK开发包下载地址:http://www.mxdraw.com/ndetail_10124.html1.  编写快速入门教程2.  重构前端代码,支持一个页面多个三维控件同时加载,或二维和三维同时加 ...

  4. ThinkPHP---AR模式

    [前言] 在之前学习框架时介绍过 (1)什么是框架? ①框架是一堆包含了常量.方法和类等代码集合: ②半成品应用,只包含了项目开发时的底层架构,并不包含业务逻辑: ③包含一些设计模式,例如单例模式,工 ...

  5. scala学习（2）---option空值处理

    https://blog.csdn.net/shadowsama/article/details/78148919 https://www.cnblogs.com/mustone/p/5648914. ...

  6. cc.Node—事件响应

    触摸事件1: 触摸事件类型: START, MOVED, ENDED(物体内), CANCEL(物体外);2: 监听触摸事件: node.on(类型, callback, target(回掉函数的th ...

  7. QT使用插件QAxWidget来展示web页面

    要求:用qt版开发一个桌面程序,该程序有一个界面,用来显示一个采用silverlight开发的web页面. 分析:在qt中实现web显示,根据qt的版本和对应编译器的版本,有如下选择: (1)5.6以 ...

  8. [POJ1155]TELE(树形背包dp)

    看到这道题的第一眼我把题目看成了TLE 哦那不是重点 这道题是树形背包dp的经典例题 题目描述(大概的): 给你一棵树,每条边有一个cost,每个叶节点有一个earn 要求在earn的和大于等于cos ...

  9. Linux 应用总结：自动删除n天前的日志

    linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快的事情.不用你去每天惦记着是否需要清理日志 ...

  10. 爬虫之Selenium库

    官方文档:https://selenium-python.readthedocs.io/ Selenium:自动化测试工具,支持多种浏览器.爬虫中主要用来解决JavaScript渲染的问题. 一.开始 ...