JS Bin// source http://jsbin.com/recikon

4/21/2018 - 8:13 AM

JS Bin // source http://jsbin.com/recikon

JS Bin

jsbin.recikon.js

var bubbleSortBtn = document.getElementById('bubbleSortBtn');
var quickSortBtn = document.getElementById('quickSortBtn');
var randomBtn = document.getElementById('randomBtn');
var container = document.getElementById('container');

var list = [];           // 存储数字队列
var snapshots = [];         // 记录每一次排序后的快照
var running = false;

randomBtn.onclick = function() {
  init(); 
  doRandom();
  render(list);
}

bubbleSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(bubbleSort);
}

quickSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(quickSort);
}

function init() {
  list = [];
  snapshots = [];
}

function run(sortFn) {
  var timer;
	
  sortFn(list);
  
  timer = setInterval(function() {
    var snapshot = [];
    if(snapshots.length !== 0) {
      snapshot = snapshots.shift();
      render(snapshot);
    }
    else {
      clearInterval(timer);
	  running = false;
      return ;
    }
  }, 50);
}

function render(list) {
  var str = '', h = '';
	
  for(var i=0; i < list.length; i++) {
    h = 'height:' + (list[i].number * 5) +'px;';
    bgColor = 'background:' + list[i].color;
    str += "<span style=" + h + bgColor + "></span>";
  }
  container.innerHTML = str;
}

function swap(arr, i, j) {
	var temp = arr[i];
	
	arr[i] = arr[j];
	arr[j] = temp;
}

// 冒泡
function bubbleSort() {
  var i, j, temp;

  for(i = 0; i < list.length - 1; i++) {
    for(j = 0; j< list.length - 1 - i; j++) {
      if(list[j].number > list[j+1].number) {
		swap(list, j, j + 1);
      }
      snapshots.push(list.slice(0));
    }
  }

}

// 快排
function quickSort() {
	function _partition(list, l, r) {
		var j = l; // list[l+1...j] < list[p]		list[j+1...i) > list[p]

		for (var i = l + 1; i <= r; i ++) {
			if (list[i].number < list[l].number) {
				swap(list, i, j + 1);
				snapshots.push(list.slice());
				j ++;
			}
		}
		swap(list, l, j);
		snapshots.push(list.slice());
		return j;
	}

	function _quickSort(list, l, r) {
		if (l >= r) return;
		var p = _partition(list, l, r);

		_quickSort(list, l, p - 1);
		_quickSort(list, p + 1, r);
	}

	_quickSort(list, 0, list.length - 1);
	return list;
}

// 随机颜色
function getColor(num) {
	var s = (~~(Math.random() * (1<<24))).toString(16);
	var prefix = ['00000', '0000', '000', '00', '0', ''];

	return '#' + prefix[s.length - 1] + s;
}

// 随机产生 40 个数字
function doRandom() {
  var number = 0;

  for(var i=0; i<40; i++) {
    number = Math.ceil(Math.random() * 90) + 10;
    list.push({number: number, color: getColor()});
  }
}

jsbin.recikon.css

#container {
	margin-top: 20px;
	height: 500px;
	min-width: 500px;
	display: flex;
	align-items: flex-end;
}
span {
	width: 10px;
	margin-left: 5px;
	background: red;
}

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width">
  	<title>JS Bin</title>
<style id="jsbin-css">
#container {
	margin-top: 20px;
	height: 500px;
	min-width: 500px;
	display: flex;
	align-items: flex-end;
}
span {
	width: 10px;
	margin-left: 5px;
	background: red;
}
</style>
</head>
<body>

	<button id="randomBtn">随机40</button>
	<button id="bubbleSortBtn">冒泡</button>
	<button id="quickSortBtn">快排</button>

	<div id="container"></div>
<script id="jsbin-javascript">
var bubbleSortBtn = document.getElementById('bubbleSortBtn');
var quickSortBtn = document.getElementById('quickSortBtn');
var randomBtn = document.getElementById('randomBtn');
var container = document.getElementById('container');

var list = [];           // 存储数字队列
var snapshots = [];         // 记录每一次排序后的快照
var running = false;

randomBtn.onclick = function() {
  init(); 
  doRandom();
  render(list);
}

bubbleSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(bubbleSort);
}

quickSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(quickSort);
}

function init() {
  list = [];
  snapshots = [];
}

function run(sortFn) {
  var timer;
	
  sortFn(list);
  
  timer = setInterval(function() {
    var snapshot = [];
    if(snapshots.length !== 0) {
      snapshot = snapshots.shift();
      render(snapshot);
    }
    else {
      clearInterval(timer);
	  running = false;
      return ;
    }
  }, 50);
}

function render(list) {
  var str = '', h = '';
	
  for(var i=0; i < list.length; i++) {
    h = 'height:' + (list[i].number * 5) +'px;';
    bgColor = 'background:' + list[i].color;
    str += "<span style=" + h + bgColor + "></span>";
  }
  container.innerHTML = str;
}

function swap(arr, i, j) {
	var temp = arr[i];
	
	arr[i] = arr[j];
	arr[j] = temp;
}

// 冒泡
function bubbleSort() {
  var i, j, temp;

  for(i = 0; i < list.length - 1; i++) {
    for(j = 0; j< list.length - 1 - i; j++) {
      if(list[j].number > list[j+1].number) {
		swap(list, j, j + 1);
      }
      snapshots.push(list.slice(0));
    }
  }

}

// 快排
function quickSort() {
	function _partition(list, l, r) {
		var j = l; // list[l+1...j] < list[p]		list[j+1...i) > list[p]

		for (var i = l + 1; i <= r; i ++) {
			if (list[i].number < list[l].number) {
				swap(list, i, j + 1);
				snapshots.push(list.slice());
				j ++;
			}
		}
		swap(list, l, j);
		snapshots.push(list.slice());
		return j;
	}

	function _quickSort(list, l, r) {
		if (l >= r) return;
		var p = _partition(list, l, r);

		_quickSort(list, l, p - 1);
		_quickSort(list, p + 1, r);
	}

	_quickSort(list, 0, list.length - 1);
	return list;
}

// 随机颜色
function getColor(num) {
	var s = (~~(Math.random() * (1<<24))).toString(16);
	var prefix = ['00000', '0000', '000', '00', '0', ''];

	return '#' + prefix[s.length - 1] + s;
}

// 随机产生 40 个数字
function doRandom() {
  var number = 0;

  for(var i=0; i<40; i++) {
    number = Math.ceil(Math.random() * 90) + 10;
    list.push({number: number, color: getColor()});
  }
}
</script>


<script id="jsbin-source-css" type="text/css">#container {
	margin-top: 20px;
	height: 500px;
	min-width: 500px;
	display: flex;
	align-items: flex-end;
}
span {
	width: 10px;
	margin-left: 5px;
	background: red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var bubbleSortBtn = document.getElementById('bubbleSortBtn');
var quickSortBtn = document.getElementById('quickSortBtn');
var randomBtn = document.getElementById('randomBtn');
var container = document.getElementById('container');

var list = [];           // 存储数字队列
var snapshots = [];         // 记录每一次排序后的快照
var running = false;

randomBtn.onclick = function() {
  init(); 
  doRandom();
  render(list);
}

bubbleSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(bubbleSort);
}

quickSortBtn.onclick = function() {
  if (running) return;

  running = true;
  run(quickSort);
}

function init() {
  list = [];
  snapshots = [];
}

function run(sortFn) {
  var timer;
	
  sortFn(list);
  
  timer = setInterval(function() {
    var snapshot = [];
    if(snapshots.length !== 0) {
      snapshot = snapshots.shift();
      render(snapshot);
    }
    else {
      clearInterval(timer);
	  running = false;
      return ;
    }
  }, 50);
}

function render(list) {
  var str = '', h = '';
	
  for(var i=0; i < list.length; i++) {
    h = 'height:' + (list[i].number * 5) +'px;';
    bgColor = 'background:' + list[i].color;
    str += "<span style=" + h + bgColor + "></span>";
  }
  container.innerHTML = str;
}

function swap(arr, i, j) {
	var temp = arr[i];
	
	arr[i] = arr[j];
	arr[j] = temp;
}

// 冒泡
function bubbleSort() {
  var i, j, temp;

  for(i = 0; i < list.length - 1; i++) {
    for(j = 0; j< list.length - 1 - i; j++) {
      if(list[j].number > list[j+1].number) {
		swap(list, j, j + 1);
      }
      snapshots.push(list.slice(0));
    }
  }

}

// 快排
function quickSort() {
	function _partition(list, l, r) {
		var j = l; // list[l+1...j] < list[p]		list[j+1...i) > list[p]

		for (var i = l + 1; i <= r; i ++) {
			if (list[i].number < list[l].number) {
				swap(list, i, j + 1);
				snapshots.push(list.slice());
				j ++;
			}
		}
		swap(list, l, j);
		snapshots.push(list.slice());
		return j;
	}

	function _quickSort(list, l, r) {
		if (l >= r) return;
		var p = _partition(list, l, r);

		_quickSort(list, l, p - 1);
		_quickSort(list, p + 1, r);
	}

	_quickSort(list, 0, list.length - 1);
	return list;
}

// 随机颜色
function getColor(num) {
	var s = (~~(Math.random() * (1<<24))).toString(16);
	var prefix = ['00000', '0000', '000', '00', '0', ''];

	return '#' + prefix[s.length - 1] + s;
}

// 随机产生 40 个数字
function doRandom() {
  var number = 0;

  for(var i=0; i<40; i++) {
    number = Math.ceil(Math.random() * 90) + 10;
    list.push({number: number, color: getColor()});
  }
}</script></body>
</html>

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

JS Bin // source http://jsbin.com/recikon