JS Bin
// source http://jsbin.com/recikon
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()});
}
}
#container {
margin-top: 20px;
height: 500px;
min-width: 500px;
display: flex;
align-items: flex-end;
}
span {
width: 10px;
margin-left: 5px;
background: red;
}
<!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>