SOURCE

var resultArray = [55,54,53,52,51,50,49,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]
// 冒泡排序
function bubbleSort(arr){
  var sort = false, n = arr.length;
  var h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('1冒泡排序耗时');
  while(!sort){
    sort = true;
    for(var i = 1; i < n; i++){
      if(arr[i-1] > arr[i]){
        var temp = arr[i];
        arr[i] = arr[i-1];
        arr[i-1] = temp;
        sort = false
      }
    }
    n--
  };
  var b = console.timeEnd('1冒泡排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app1 table').append(h.join())
  
}
function bubbleSort1(arr){
  var sort = false, n = arr.length;
  var h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('2冒泡排序耗时');
  for(var i = 0; i < n; i++){
    for(var j = 0; j < n - 1 - i; j++){
      if(arr[j] > arr[j+1]){
        var temp = arr[j+1]
        arr[j+1] = arr[j]
        arr[j] = temp
      }
    }
  }
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app1 table').append(h.join())
  console.timeEnd('2冒泡排序耗时');
}
function bubbleSort2(arr){
  var sort = false, n = arr.length;
  var h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('3冒泡排序耗时');
  for(var i = 0; i < n; i++){
    for(var j = 0; j < n - 1 - i; j++){
      if(arr[j] > arr[j+1]){
        var temp = arr[j+1]
        arr[j+1] = arr[j]
        arr[j] = temp
      }
    }
  }
  console.timeEnd('3冒泡排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app1 table').append(h.join())
}
function bubbleSort3(arr){
  var high = arr.length - 1, low = 0, n = arr.length;
  var h = [], tmp, j;
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('4冒泡排序耗时');
  while(high > low) {
    for(j = low; j < high; ++j){
      if(arr[j] > arr[j + 1]) {
        tmp = arr[j]
        arr[j] = arr[j + 1]
        arr[j + 1] = tmp
      }
    }
     --high
    for(j = high; j > low; --j){
      if(arr[j] < arr[j - 1]) {
        tmp = arr[j]
        arr[j] = arr[j - 1]
        arr[j - 1] = tmp
      }
    }
   	++low
  }
  console.timeEnd('4冒泡排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app1 table').append(h.join())
}
new bubbleSort(resultArray.concat([]));
new bubbleSort1(resultArray.concat([]));
new bubbleSort2(resultArray.concat([]));
new bubbleSort3(resultArray.concat([]));
// 选择排序----------------------------------------------------------
function selectionSort(arr){
  var n = arr.length, tmp, minIndex, h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('1选择排序耗时');
  for(var i = 0; i < n - 1; i++){
    minIndex = i
    for(var j = i + 1; j < n; j++){
      if(arr[j] < arr[minIndex]){
        minIndex = j
      }
    }
    tmp = arr[i]
    arr[i] = arr[minIndex]
    arr[minIndex] = tmp
  }
  console.timeEnd('1选择排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app2 table').append(h.join())
}
new selectionSort(resultArray.concat([]));
// 插入排序----------------------------------------------------------
function insertionSort(arr){
  var n = arr.length, tmp, minIndex, h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('1插入排序耗时');
  for(var i = 1; i < n; i++){
    var j = i - 1, key = arr[i];
    while(j >= 0 && arr[j] > key){
      arr[j + 1] = arr[j];
      j--
    }
    arr[j+1] = key
  }
  console.timeEnd('1插入排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app3 table').append(h.join())
}
function binaryInsertionSort(arr){
  var n = arr.length, left = 0, right,i, key, h = [];
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>二分插入排序前：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  console.time('2二分插入排序耗时');
  for(i = 1; i < n; i++){
    key = arr[i], left = 0, right = i - 1;
    while(left <= right){
      var middle = parseInt((left + right) / 2)
      if(key < arr[middle]){
        right = middle - 1
      }else{
        left = middle + 1
      }
    }
    for(var j = i - 1; j >= left; j-- ){
      arr[j + 1] = arr[j]
    }
    arr[left] = key
  }
  console.timeEnd('2二分插入排序耗时');
  h.push('<tr>')
  h.push('<td>' +moment().format('YYYY-MM-DD hh:mm:ss') + ' ' + new Date().getMilliseconds()+'</td>')
  h.push('<td>二分插入排序后：[' + arr.join(',') +']</td>')
  h.push('</tr>')
  $('#app3 table').append(h.join())
  return arr
}
new insertionSort(resultArray.concat([]))
var b = new binaryInsertionSort(resultArray.concat([]))
console.log(b)

<script src=""></script>
<script src=""></script>
<ul>
  <li>
    <h4>冒泡排序</h4>
    <div id="app1">
      <table class="table">
        <tr>
          <th style="width:200px">时间</th>
          <th style="width:500px">数组</th>
        </tr>
      </table>
    </div>
  </li>
  <li>
    <h4>选择排序</h4>
    <div id="app2">
      <table class="table">
        <tr>
          <th style="width:200px">时间</th>
          <th style="width:500px">数组</th>
        </tr>
      </table>
    </div>
  </li>
  <li>
    <h4>插入排序</h4>
    <div id="app3">
      <table class="table">
        <tr>
          <th style="width:200px">时间</th>
          <th style="width:500px">数组</th>
        </tr>
      </table>
    </div>
  </li>
  <li>
    <h4></h4>
    <div id="app4"></div>
  </li>
  <li>
    <h4></h4>
    <div id="app5"></div>
  </li>
</ul>

li{list-style:none;}
.table{width:200px;table-layout:fixed;}
.table td{word-break:break-all;}