<!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. mysql中数据库的设计

      软件开发流程(CMMI): 1):项目启动; 2):项目计划: 3):需求分析; 需要得到的结果是什么? 4):系统设计;         该怎么做? 5):系统开发; 6):系统测试; 7):系 ...

  2. firefox浏览器中 bootstrap 静态弹出框中select下拉框不能弹出（解决方案）

    问题出现场景1: 在firefox浏览器中在bootstrap弹出的modal静态框中再次弹出一个静态框时 select下拉框不能弹出选项 解决方案:去掉最外层静态框的 tabindex=" ...

  3. js数组的各种方法

    1.检测数组 ①Instanceof: if(value instanceof Array){ } 它假定只有一个全局执行环境,若网页中包含多个框架,则存在多个不同的全局执行环境,则Instanceo ...

  4. Python自动监控错误日志

    平时在查看日志的时候打开满屏的日志,看上去有点凌乱.于是写个Python脚本过滤出想要看的错误的日志.直接上脚本 脚本示例 def read_log(logname,keyword): tell = ...

  5. RabbitMQ调用

    添加 gradle依赖complie("com.rabbitmq:amqp-client:5.0.0") Hello, World Working Queues Publish/S ...

  6. mysqlworkbench 执行update语句报错：You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column

    You are using safe update mode and you tried to update a table without a WHERE that uses a KEY colum ...

  7. 构造From窗体获取数据库数据，去除数据库中无用信息，并赋值给字段，最后画出图

    private void cbNum_SelectedIndexChanged(object sender, EventArgs e) { FieldListLug.Clear();//继续清除字段 ...

  8. JavaScipt30(第十八个案例)（主要知识点：Array.prototype.map）

    承接上文,这是第十八个案例,中间的十到十八我直接看了答案,因为有些例子从他打开的页面看不出他要做什么. 附上项目链接: https://github.com/wesbos/JavaScript30 这 ...

  9. 事件的节流（throttle）与防抖（debounce）

    事件的节流(throttle)与防抖(debounce) 有些浏览器事件可以在短时间内快速触发多次,比如调整窗口大小或向下滚动页面.例如,监听页面窗口滚动事件,并且用户持续快速地向下滚动页面,那么滚动 ...

  10. Java基础——工具类

    一Java 常用类 Object Object类是所有类.数组.枚举类的父类.位于Java.lang包.也就是说,Java允许把任意类型的对象赋给Object类型的变量. Object类的常用方法 1 ...