jquery 动态演示各种排序实例代码

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<p><br>
<br>
</p>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<br>
<meta charset="utf-8">
<title>快速排序（quicksort）的javascript实现-动画演示</title>
<p><link href="<a%20href=" http: target="_blank">css.css" type="text/css" rel="stylesheet" /></p>
<p><style type="text/css">html, body{<br />
  padding: 0px;<br />
  margin: 0px;<br />
  background: white;<br />
}</style></p>
<p>.graphical-sort{<br>
  position: relative;<br>
  width: 100%;<br>
  height: 100%;<br>
  padding-top: 40px;<br>
  <br>
}</p>
<p>.graphical-sort .bars-container{<br>
  height: 100%;<br>
  background: #222;<br>
  white-space: nowrap;<br>
  overflow: hidden;<br>
}</p>
<p>.graphical-sort .bars-container span{<br>
  display: inline-block;<br>
  position: relative;<br>
  height: 100%;<br>
  background: #35bddb;<br>
  border-left: 1px solid #222;</p>
<p>  -webkit-box-sizing: border-box;<br>
  -moz-box-sizing: border-box;<br>
  box-sizing: border-box;<br>
}</p>
<p>.graphical-sort .bars-container span.highlight{<br>
  background: #aee496;<br>
}</p>
<p>.graphical-sort .controller{<br>
  position: absolute;<br>
  font-size: 10px;<br>
  white-space: nowrap;<br>
  overflow: visible;<br>
  top: 0px;<br>
  <br>
}<br>
.graphical-sort .controller .widget{<br>
  margin-right: 5px;<br>
}</p>
<p>.graphical-sort .controller .speed-amount{<br>
  display: inline-block;<br>
  <br>
}</p>
<p>.graphical-sort .controller .speed-slider{<br>
  display: inline-block;<br>
  <br>
}</p>
<p><br>
</p>
<br>
<script src="jquery.min.js"></script><br>
<script src="jquery-ui.min.js"></script>
<p><link href="jquery-ui.css" rel="stylesheet"><br>
</p>
<div id="view">
<br>
</div>
<br>
<script>
<p>$(function(){<br />
  // -----------------------------------------<br />
  // bubble sort<br />
  // -----------------------------------------<br />
  function bubblesort(){<br />
    var array = this.values<br />
    var length = array.length<br />
    for(var i = length - 1; 0 < i; i--){<br />
      for(var j = 0; j < i; j++){<br />
        this.compare(j, j + 1)<br />
      }<br />
    }<br />
  }<br />
  <br />
  // -----------------------------------------<br />
  // <a href="https://www.111cn.net/tags.php/select">selection sort<br />
  // -----------------------------------------<br />
  function selectionsort(){<br />
    var array = this.values<br />
    var length = array.length<br />
    for(var i = 0; i < length - 1; i++){<br />
      var minindex = i<br />
      var minvalue = array[minindex]<br />
      for (var j = i + 1; j < length; j++) {<br />
        this.highlight(j, minindex)<br />
        if (array[j] < minvalue) {<br />
          minindex = j<br />
          minvalue = array[minindex]<br />
        }<br />
      }<br />
      this.compare(i, minindex)<br />
    }<br />
    return array<br />
  }<br />
  // -----------------------------------------<br />
  // shaker sort<br />
  // -----------------------------------------<br />
  function shakersort(){<br />
    var array = this.values<br />
    var length = array.length<br />
    var left = 0<br />
    var right = length - 1<br />
    var lastswappedleft = left<br />
    var lastswappedright = right<br />
    <br />
    while(left < right){<br />
      lastswappedright = 0<br />
      for(var i = left; i < right; i++){<br />
        if(array[i] > array[i + 1]){<br />
          this.swap(i, i + 1)<br />
          lastswappedright = i<br />
        }else{<br />
          this.highlight(i, i + 1)<br />
        }<br />
      }<br />
      right = lastswappedright<br />
      <br />
      lastswappedleft = length - 1<br />
      for(var j = right; left < j; j--){<br />
        if(array[j - 1] > array[j]){<br />
          this.swap(j - 1, j)<br />
          lastswappedleft = j<br />
        }else{<br />
          this.highlight(j - 1, j)<br />
        }<br />
      }<br />
      left = lastswappedleft<br />
    }<br />
  }    <br />
  // -----------------------------------------<br />
  // insertion sort<br />
  // -----------------------------------------<br />
  function insertionsort(){<br />
    var array = this.values<br />
    var length = array.length<br />
    for(var i = 1; i < length; i++){<br />
      for(var j = i; 0 < j; j--){<br />
        if(array[j - 1] > array[j]){<br />
          this.swap(j - 1, j)<br />
        }else{<br />
          this.highlight(j - 1, j)<br />
          break<br />
        }<br />
      }<br />
    }<br />
  }<br />
  <br />
  // -----------------------------------------<br />
  // shell sort<br />
  // -----------------------------------------<br />
  function shellsort(){<br />
    var array = this.values<br />
    var length = array.length<br />
    var gap = 1<br />
    while(gap < length) {<br />
      gap = 3 * gap + 1<br />
    }<br />
    while(gap > 1){<br />
      gap = math.floor(gap / 3)<br />
      for(var i = gap; i < length; i++){<br />
        for(var j = i; 0 < j; j -= gap){<br />
          if(array[j - gap] > array[j]){<br />
            this.swap(j - gap, j)<br />
          }else{<br />
            this.highlight(j - gap, j)<br />
            break<br />
          }<br />
        }<br />
      }<br />
    }<br />
  }
<p>  // -----------------------------------------<br />
  // quick sort<br />
  // -----------------------------------------<br />
  function quicksort(first, last){<br />
    // todo:<br />
    var array = this.values<br />
    first = (first === undefined) ? 0 : first<br />
    last = (last === undefined) ? (array.length - 1) : last
<p>    var pivotindex = math.floor((first + last) / 2)<br />
    var pivotvalue = array[pivotindex]<br />
    var f = first, l = last<br />
    while(true){<br />
      while(true){<br />
        this.highlight(f, pivotindex)<br />
        if(!(array[f] < pivotvalue)) break<br />
        f++<br />
      }<br />
      while(true){<br />
        this.highlight(l, pivotindex)<br />
        if(!(pivotvalue < array[l])) break<br />
        l--<br />
      }  <br />
      if(l <= f){<br />
        break<br />
      }<br />
      if(pivotindex === l){<br />
        pivotindex = f<br />
      }<br />
      if(pivotindex === l){<br />
        pivotindex = l<br />
      }<br />
      this.compare(f, l)<br />
      f++; l--<br />
    }<br />
    if(first < f - 1) quicksort.call(this, first, f - 1)<br />
    if(l + 1 < last) quicksort.call(this, l + 1, last)<br />
  }<br />
  <br />
  // -----------------------------------------<br />
  // merge sort<br />
  // -----------------------------------------<br />
  function mergesort(first, last){<br />
    var array = this.values<br />
    first = (first === undefined) ? 0 : first<br />
    last = (last === undefined) ? array.length - 1 : last<br />
    if (last - first < 1) {<br />
      return<br />
    }<br />
    var middle = math.floor((first + last) / 2)<br />
    mergesort.call(this, first, middle)<br />
    mergesort.call(this, middle + 1, last)<br />
    <br />
    var f = first<br />
    var m = middle<br />
    <br />
    while (f <= m && m + 1 <= last) {<br />
      this.highlight(f, m + 1)<br />
      if (array[f] >= array[m + 1]) {<br />
        this.insertbefore(m + 1, f)<br />
        m++<br />
      }<br />
      f++<br />
    }<br />
  }<br />
  <br />
  // -----------------------------------------<br />
  // heap sort<br />
  // -----------------------------------------<br />
  function swapup(array, current){<br />
    var parent = math.floor((current - 1) / 2)<br />
    while(current != 0){<br />
      if (!(array[current] > array[parent])) {<br />
        this.highlight(current, parent)<br />
        break<br />
      }<br />
      this.swap(current, parent)<br />
      current = parent<br />
      parent = math.floor((current - 1) / 2)<br />
    }<br />
  }<br />
  <br />
  function swapdown(array, current, length){<br />
    var child = current * 2 + 1<br />
    while(true){<br />
      if(array[child] < array[child + 1]){<br />
        child += 1<br />
      }<br />
      if(array[current] >= array[child]){<br />
        this.highlight(current, child)<br />
        break<br />
      }<br />
      if(length <= child){<br />
        break<br />
      }<br />
      this.swap(current, child)<br />
      current = child<br />
      child = current * 2 + 1<br />
    }<br />
  }<br />
  <br />
  function heapify(array){<br />
    for(var i = 0; i < array.length; i++){<br />
      swapup.call(this, array, i)<br />
    }<br />
  }<br />
  <br />
  function heapsort(){<br />
    var array = this.values<br />
    heapify.call(this, array)<br />
    for(var i = array.length - 1; 0 < i; i--){<br />
      if(array[0] > array[i]){<br />
        this.swap(0, i)<br />
      }else{<br />
        this.highlight(0, i)<br />
      }<br />
      swapdown.call(this, array, 0, i)<br />
    }<br />
  }<br />
  <br />
  // -----------------------------------------<br />
  // bogo sort<br />
  // -----------------------------------------<br />
  function bogosort(){<br />
    var array = this.values<br />
    this.bogosortcompleted = false<br />
    var length = array.length<br />
    // shffle<br />
    for(var i = 0; i < length; i++){<br />
      var j = math.floor(math.random() * length)<br />
      this.swap(i, j)<br />
    }<br />
    <br />
    // check<br />
    for(var i = 0; i < length - 1; i++){<br />
      this.highlight(i, i + 1)<br />
      if(array[i] > array[i + 1]){<br />
        return　// incomplete<br />
      }<br />
    }<br />
    this.bogosortcompleted = true<br />
  }<br />
  bogosort.name = "bogosort"
<p>  // -----------------------------------------<br />
  // main<br />
  // -----------------------------------------<br />
  var sort = graphicalsort()<br />
  <br />
  // default sort function<br />
  sort.sortfunc = bubblesort<br />
  <br />
  var view = $("#view")<br />
  view.width($(window).width()).height($(window).height() - 125)<br />
  sort.show(view)<br />
  <br />
  // -----------------------------------------<br />
  // sort menu<br />
  // -----------------------------------------<br />
  var sortmenu = {<br />
    "气泡排序": bubblesort,<br />
    "直接选择排序": selectionsort,<br />
    "shaker排序": shakersort,<br />
    "插入排序": insertionsort,<br />
    "希尔排序": shellsort,<br />
    "快速排序": quicksort,<br />
    "归并排序": mergesort,<br />
    "堆排序": heapsort,<br />
    "猴子排序": bogosort<br />
  }<br />
  <br />
  var menu = $("<div>").insertbefore(view).css({<br />
    marginbottom: 10,<br />
    fontsize: 12<br />
  })<br />
  $.each(sortmenu, function(name, func){<br />
    var radio = $("<input type='radio' name='sort-menu' >").attr("id", name).appendto(menu)<br />
    var label = $("<label>").attr("for", name).text(name).appendto(menu)<br />
    <br />
    radio.click(function(){<br />
      sort.sortfunc = func<br />
      sort.displaybars()<br />
    })<br />
    <br />
    if(sort.sortfunc === func){<br />
      radio.attr("checked", "true")<br />
    }<br />
  })<br />
  menu.buttonset()<br />
})<br />
</script>
<p><script type="text/javascript" src="class.js"></script></p>
<p><script type="text/javascript"><br />
(function(){<br />
var profile = false<br />
//var profile = true</script></p>
<p>// -----------------------------------------<br>
// utils<br>
// -----------------------------------------<br>
jquery.fn.swap = function(b){ <br>
    b = jquery(b)[0]; <br>
    var a = this[0]; <br>
    var temp = a.parentnode.insertbefore(document.createtextnode(''), a); <br>
    b.parentnode.insertbefore(a, b); <br>
    temp.parentnode.insertbefore(b, temp); <br>
    temp.parentnode.removechild(temp); <br>
    return this; <br>
}</p>
<p>array.prototype.insert = function(value, index){<br>
  var array = this<br>
    for(var i = array.length - 1; index 
        array[i + 1] = array[i]<br>
    }<br>
    array[index] = value<br>
}</p>
<p>array.prototype.insertbefore = function(from, to){<br>
  this.insert(this[from], to)<br>
  if(to 
    from += 1<br>
  }<br>
  this.splice(from, 1)<br>
}<br>
array.prototype.swap = function(a, b){<br>
  var temp = this[a]<br>
  this[a] = this[b]<br>
  this[b] = temp<br>
}</p>
<p>function range(min, max){<br>
  var array = []<br>
  while(min 
    array.push(min)<br>
    min++<br>
  }<br>
  return array<br>
}</p>
<p>function randrange(min, max){<br>
  return math.floor(math.random() * (max - min)) + min<br>
}</p>
<p>function shuffle(array){<br>
  var length = array.length<br>
  for(var i = 0; i 
    var j = randrange(0, length)<br>
    var temp = array[i]<br>
    array[i] = array[j]<br>
    array[j] = temp<br>
  }<br>
  return array<br>
}</p>
<p>window.profile = {<br>
  nowprofiling: false,<br>
  start: function(name){<br>
    if(profile === false) return<br>
    if(this.nowprofiling){<br>
      console.profileend()<br>
    }<br>
    this.nowprofiling = true<br>
    console.profile(name)<br>
  },<br>
  end: function(){<br>
    if(profile === false) return<br>
    this.nowprofiling = false<br>
    console.profileend()<br>
  }<br>
}</p>
<p>// -----------------------------------------<br>
// queue class<br>
// -----------------------------------------<br>
var queue = class.$extend({<br>
  __init__: function(){<br>
    this.length = 0<br>
    this.i = 0<br>
    this.queue = []<br>
  },<br>
  <br>
  get: function(){<br>
    if(this.length === 0)<br>
      return undefined<br>
    this.length--<br>
    return this.queue[this.i++]<br>
  },<br>
  <br>
  put: function(value){<br>
    this.queue.push(value)<br>
    this.length++<br>
  }<br>
})</p>
<p>// -----------------------------------------<br>
// controller class<br>
// -----------------------------------------<br>
controller = class.$extend({<br>
  widget: $("<span class="widget"></span>"),<br>
  reset: $.noop,<br>
  onspeedchange: $.noop,<br>
  onlengthchange: $.noop,<br>
  <br>
  __init__: function(defaults){<br>
    this.element = $("</p>
<div class="controller">")<br>
    var restart = this._createrestartbutton()<br>
    var buttonset = this._createlengthbuttonset(defaults.length)<br>
    var slider = this._createspeedslider(defaults.speed)<br>
    this.element.append(restart).append(buttonset).append(slider)<br>
  },
<p>  <br>
  _createrestartbutton: function(){<br>
    var self = this<br>
    var button = $("<button>重新演示</button>").button().click(function(){<br>
      self.restart()<br>
    })<br>
    return this.widget.clone().append(button)<br>
  },<br>
  <br>
  _createspeedslider: function(defaultspeed){<br>
    var self = this<br>
    var amount = $("<span class="speed-amount"></span>").text(defaultspeed)<br>
    var slider = $("<span class="speed-slider"></span>")<br>
    slider.slider({<br>
      min: 1,<br>
      max: 300,<br>
      value: defaultspeed,<br>
      slide: function(event, ui){<br>
        amount.text(ui.value)<br>
        self.onspeedchange(ui.value)<br>
      }<br>
    })</p>
<p>    var sliderwrapper = $("<span>").append(amount).append(slider)<br>
    return this.widget.clone().text("演示速度: ").append(sliderwrapper)<br>
  },<br>
  <br>
  _createlengthbuttonset: function(defaultlength){<br>
    var self = this<br>
    var buttonset = this.widget.clone().addclass("length-button")<br>
    var radioname = "graphical-sort-radio"<br>
    var _label = $("<label>")<br>
    var _radio = $("<input type="radio">").attr("name", radioname)<br>
    $.each([5, 10, 30, 50, 100, 200], function(i, length){<br>
      var label = _label.clone().text(length + "个排序").attr("for", radioname + length)<br>
      var radio = _radio.clone().attr("id", radioname + length).val(length)<br>
      buttonset.append(label).append(radio)<br>
    })<br>
    buttonset.find("input[value=" + defaultlength + "]").attr("checked", "checked")<br>
    buttonset.buttonset()<br>
    buttonset.click(function(event, ui){<br>
      self.onlengthchange(parseint(event.target.value))<br>
    })<br>
    return buttonset<br>
  }  <br>
})<br>
// -----------------------------------------<br>
// bar class<br>
// -----------------------------------------<br>
var bar = class.$extend({<br>
  __init__: function(value){<br>
    this.value = value<br>
  },<br>
  createelement: function(){<br>
    var bar = $("<span>")<br>
    return bar<br>
  }<br>
})</span></label></span></p>
<p>// -----------------------------------------<br>
// bars class<br>
// -----------------------------------------<br>
var bars = class.$extend({<br>
  __init__: function(length, container){<br>
    this.length = length<br>
    this.container = container<br>
    this.bars = []<br>
    var values = this.values = shuffle(range(1, length+1))<br>
    <br>
    for(var i = 0; i 
      this.bars[i] = bar(values[i])<br>
    }<br>
    this.elements = this._createelements()<br>
  },</p>
<p>  swap: function(a, b, command){<br>
    var classname = "highlight"<br>
    var elements = this.container.find("span")<br>
    elements.removeclass(classname)<br>
    var bara = elements.eq(a)<br>
    var barb = elements.eq(b)<br>
    bara[0].classname = barb[0].classname = classname<br>
    if(command === c.swap){<br>
      barb.swap(bara)<br>
    }<br>
  },<br>
  <br>
  insert: function(from, to){<br>
    var elements = this.container.find("span").removeclass("highlight")<br>
    this.container[0].insertbefore(elements.eq(from).addclass("highlight")[0], elements[to])<br>
  },<br>
  <br>
  _createelements: function(){<br>
    var elements = $()<br>
    var length = this.length<br>
    $.each(this.bars, function(){<br>
      var bar = this<br>
      var element = bar.createelement()<br>
      element.css("width", 100 / length + "%")<br>
      element.css("height", bar.value / length * 100 + "%")<br>
      elements = elements.add(element)<br>
    })<br>
    return elements<br>
  }<br>
})</p>
<p>var command = class.$extend({<br>
  __classvars__: {<br>
    highlight: "highlight",<br>
    swap: "swap",<br>
    insert: "insert",<br>
    set: "set"<br>
  }<br>
})<br>
var c = command</p>
<p>// -----------------------------------------<br>
// graphicalsort class<br>
// -----------------------------------------<br>
graphicalsort = class.$extend({<br>
  length: 30,  // default list length<br>
  speed: 100,  // default speed<br>
  currenttaskid: -1,<br>
  <br>
  __init__: function(){},<br>
  <br>
  // graphical api<br>
  compare: function(a, b){<br>
    var command = c.highlight<br>
    if(this.values[a] > this.values[b]){<br>
      this.values.swap(a, b)<br>
      command = c.swap<br>
    }<br>
    this.task.put([a, b, command])<br>
  },<br>
  <br>
  // graphical api<br>
  highlight: function(a, b){<br>
    this.task.put([a, b, c.highlight])<br>
  },<br>
  <br>
  // graphical api<br>
  swap: function(a, b){<br>
    this.values.swap( a, b)<br>
    this.task.put([a, b, c.swap])<br>
  },<br>
  <br>
  // graphical api<br>
  insertbefore: function(from, to){<br>
    this.values.insertbefore(from, to)<br>
    this.task.put([from, to, c.insert])<br>
  },<br>
  <br>
  show: function(viewelement){<br>
    if(this.sortfunc === undefined){<br>
      throw error("sort function is undefined")<br>
    }<br>
    this.$sort = $("</p>
<div class="graphical-sort">")<br>
    this.$sort.append(this._createcontroller().element)<br>
    this.container = $("<div class="bars-container">")<br>
    this.$sort.append(this.container)<br>
    <br>
    viewelement.append(this.$sort)<br>
    this.displaybars()<br>
  },<br>
  <br>
  displaybars: function(){<br>
    cleartimeout(this.currenttaskid)<br>
    this.bars = bars(this.length, this.container)<br>
    this.values = this.bars.values<br>
    this.container.empty().append(this.bars.elements)<br>
    this._inittask()<br>
    <br>
    profile.start()<br>
    this._settimeout()<br>
  },<br>
  <br>
  complete: function(){<br>
    this.container.find("span").removeclass("highlight")<br>
    if(this.sortfunc.name === "bogosort"){<br>
      if(this.bogosortcompleted === false){<br>
        this._inittask()<br>
        this._settimeout()<br>
        return<br>
      }<br>
    }<br>
    profile.end()<br>
  },<br>
  <br>
  _createcontroller: function(){<br>
    this.controller = controller({<br>
      speed: this.speed,<br>
      length: this.length<br>
    })<br>
    return this._seteventtocontroller(this.controller)<br>
  },<br>
  <br>
  _seteventtocontroller: function(controller){<br>
    var self = this<br>
    controller.onlengthchange = function(length){<br>
      self.length = length<br>
      self.displaybars()<br>
    }<br>
    controller.onspeedchange = function(speed){<br>
      self.speed = speed<br>
    }<br>
    controller.restart = function(){<br>
      self.displaybars()<br>
    }<br>
    return controller<br>
  },
<p>  _inittask: function(){<br>
    this.task = queue()<br>
    this.sortfunc()<br>
  },<br>
  <br>
  _next: function(){<br>
    var order = this.task.get()<br>
    if(order === undefined){<br>
      this.complete()<br>
      return<br>
    }<br>
    var command = order[2]<br>
    if(command === c.insert){<br>
      this.bars.insert(order[0], order[1])<br>
    }else{<br>
      this.bars.swap(order[0], order[1], command)<br>
    }</p>
<p>    this._settimeout()<br>
    <br>
  },<br>
  <br>
  _settimeout: function(){<br>
    var self = this<br>
    var interval = 2000 / this.speed<br>
    this.currenttaskid = settimeout(function(){<br>
      self._next()<br>
    }, interval)<br>
  }  <br>
})</p>
<p>})()</p>
<p><br>
<br>
</p>
<div class="jscode">
<input class="btn" type="button" value="运行代码" onclick="runCode(runcool)"> <input class="btn copy" data-clipboard-target="runcool" type="button" value="复制代码" onclick="doCopy('runcool')"> <input class="btn" type="button" value="另存代码" onclick="saveCode(runcool)"> 提示：您可以先修改部分代码再运行</div>
</div>
</div>
</div>

相关文章

精彩推荐