1<html> 2<head> 3<title>Sorting in action</title> 4 5<link rel=stylesheet href="sort.css" type="text/css"> 6 7<script src="sort.js"></script> 8<script src="sort-bubble.js"></script> 9<script src="sort-insertion.js"></script> 10<script src="sort-quick.js"></script> 11<script src="sort-heap.js"></script> 12 13<script> 14var sorts = new Array(); 15sorts.push(new Sort("Bubble", sort_bubble)); 16sorts.push(new Sort("Insertion", sort_insertion)); 17sorts.push(new Sort("Quick", sort_quick)); 18sorts.push(new Sort("Heap", sort_heap)); 19 20 21function init() { 22 function starter(sort) { 23 return function(){sort.start();}; 24 } 25 for (var i = 0; i < sorts.length; i++) { 26 var sort = sorts[i]; 27 sort.init(); 28 var graph = document.getElementById(sort.name); 29 graph.onclick = starter(sort); 30 } 31 var inner_loop = document.getElementById("inner_loop"); 32 inner_loop.checked = inner_loop_enabled != 0; 33} 34 35function start_all() { 36 for (var i = 0; i < sorts.length; i++) { 37 sorts[i].start(); 38 } 39} 40 41function reset_all() { 42 for (var i = 0; i < sorts.length; i++) { 43 sorts[i].reset(); 44 } 45} 46 47function change_size(val) { 48 size = val; 49 reset_all(); 50} 51 52function enable_inner_loop(enabled) { 53 if (enabled) { 54 inner_loop_enabled = 1; 55 } else { 56 inner_loop_enabled = 0; 57 } 58} 59 60</script> 61</head> 62<body onload="init();"> 63 64 65<div id="sort_container" style="border: 0px solid black; margin: 0px"> 66<div> 67<div class="button" onclick="start_all();">Start All</div> 68<div class="button" onclick="reset_all();">Reset All</div> 69...or click on each algorithm to start separately 70<div style="float:right"> 71<b>Size</b><input onchange="change_size(this.value);" id="size" value=300 size=3> 72<b>Inner Loop</b><input id="inner_loop" type="checkbox" onchange="enable_inner_loop(this.checked);" id="inner loop"> 73</div> 74</div> 75 76<div> 77<ul id="Heap" class="bar"> 78</ul> 79</div> 80 81<div> 82<ul id="Quick" class="bar"> 83</ul> 84</div> 85 86<div> 87<ul id="Bubble" class="bar"> 88</ul> 89</div> 90 91<div> 92<ul id="Insertion" class="bar"> 93</ul> 94</div> 95 96</div> 97 98</body> 99</html> 100