bubblesort_js/index.html
2017-10-12 18:10:59 +02:00

245 lines
6.1 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>Bubblesort</title>
<meta charset="utf-8">
<meta name="generator" content="Bluefish 2.2.5" >
<meta name="author" content="Clemens" >
<meta name="date" content="2017-10-12T14:27:56+0200" >
<meta name="copyright" content="Clemens Riese https://milchinsel.de" >
<script type="text/javascript">
var counter = 0;
var marked = 0;
function getArray(ignore = 0) {
var array = [];
if (counter > 0) {
var arrayItem = 0;
for (var i = 1; i <= counter; i++) {
if (ignore != i) {
array[arrayItem] = parseInt(document.getElementById('item-' + i).value);
arrayItem = arrayItem + 1;
}
}
}
return array;
}
function showMenu(items) {
var output = '';
for (var i=0; i<items.length; i++) {
output = output + '<input type="number" id="item-' + (i+1) + '" value="' + items[i] + '"> <button onclick="remove(' + (i+1) + ')"> - </button>';
if (items[i] == marked) {
output = output + '<button onclick="mark(' + items[i] + ')" class="highlite"><b> * </b></button>';
}
else {
output = output + '<button onclick="mark(' + items[i] + ')"> * </button>';
}
output = output + '<br>';
}
if (counter > 10) {
output = output + '<small class="highlite">Größere Listen beanspruchen beim sortieren mehr Leistung und können deshalb in der Verarbeitung länger dauern.</small>';
}
document.getElementById('items').innerHTML = output;
}
function add() {
var items = getArray();
counter = counter + 1;
items[counter-1] = '';
showMenu(items);
}
function remove(item) {
var items = getArray(item);
counter = counter - 1;
showMenu(items);
}
function mark(item) {
marked = item;
showMenu(getArray());
}
function randArray(maxItems, maxValue) {
var items = [];
for (var i=0; i < Math.floor((Math.random() * 10) + 1); i++) {
items[i] = Math.floor((Math.random() * 100) + 1);
}
return items;
}
function random() {
var items = [];
var output = '';
while (items.length < 5) {
var items = randArray();
}
counter = items.length;
showMenu(items);
}
function bubblesort() {
var array = getArray();
var n = array.length;
var getauscht = true;
var swapped = false;
var zwischenspeicher = 0;
printAddCaption(array);
while (n > 1 && getauscht) {
getauscht = false;
for (var i=0; i < n-1; i++) {
swopped = false;
if (array[i] > array[i+1]) {
zwischenspeicher = array[i];
array[i] = array[i+1];
array[i+1] = zwischenspeicher;
getauscht = true;
swopped = true;
}
printAdd(array, i, swopped);
}
n = n - 1;
}
printAddCaption(array);
printOut();
}
var printarray = '';
function printAddCaption(array) {
var output = '';
output = output + '<tr>';
for (var i=0; i < array.length; i++) {
output = output + '<th class="';
if (array[i] == marked) {
output = output + 'highlite ';
}
output = output + '">';
output = output + array[i];
output = output + '</th>';
}
output = output + '</tr>';
printarray = printarray + output;
}
function printAdd(array, active, swapped) {
var output = '';
output = output + '<tr>';
for (var i=0; i < array.length; i++) {
output = output + '<td class="';
if (i == active || i == active+1) {
output = output + 'active ';
}
if (array[i] == marked) {
output = output + 'highlite ';
}
output = output + '">';
if ((i == active || i == active+1) && swapped) {
output = output + '<b>';
}
output = output + array[i];
if ((i == active || i == active+1) && swapped) {
output = output + '</b>';
}
output = output + '</td>';
}
output = output + '</tr>';
printarray = printarray + output;
}
function printOut() {
var output = '';
output = output + '<table>';
output = output + printarray;
output = output + '</table>';
document.getElementById('output').innerHTML = output;
printarray = '';
}
</script>
<style type="text/css">
table {
width:100%;
text-align: center;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table tr td.active {
background-color: lightgray;
}
table tr th {
background-color: gray;
}
.highlite {
color: red;
}
</style>
</head>
<body>
<aside>
<a href="https://github.com/clerie/bubblesort_js"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</aside>
<header>
<h1>Bubblesort</h1>
</header>
<section>
<fieldset>
<legend>Anleitung:</legend>
<p>Sortieren von Zahlen mittels Bubblesort <small><a href="https://de.m.wikipedia.org/wiki/Bubblesort">(WIKIPEDIA)</a></small>.</p>
<ul>
<li><b>+</b> Listenelement hinzufügen</li>
<li><b>-</b> Listenelement entfernen</li>
<li><b>*</b> Element markieren <br><small>(wird bei der Sortierausgabe <span class="highlite">rot</span> hervorgehoben)</small></li>
<li><b>Random</b> zufällige Liste</li>
<li><b>Sortieren</b> Liste sortieren lassen</li>
</ul>
</fieldset>
<br>
<fieldset>
<legend>Eingabe:</legend>
<div id="items"></div>
<hr>
<button onclick="add();"> + </button> <button onclick="random();"> Random </button>
</fieldset>
<br>
<fieldset>
<legend>Ausgabe:</legend>
<button onclick="bubblesort();"> Sortieren </button>
<hr>
<div id="output">
</div>
</fieldset>
</section>
<footer>
<p>&copy; 2017 <a href="https://milchinsel.de">milchinsel.de</a> Clemens Riese</p>
</footer>
</body>
</html>