Анимация сортировки
Помогите, гуру JS.
Дали задание, отобразить графически процесс сортировки целых чисел, чтобы пользователь мог воочию наблюдать как сортируются данные. Сортировка - пузырьком. Ума не приложу, как анимацию сделать тут=( Прошу дать совет, направить на истинный путь=) <!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form>
<div>Введите числа, которые вы хотите занести в массив, без пробелов, через запятую</div>
<input type="text" id="arr" required>
<input type="button" value="Вывести" id="show">
<input type="button" value="Отсортировать" id="sortButton">
</form>
<div id="sort"></div>
<script>
function SortBubble() {
var showButton=document.getElementById('show');
var sortButton=document.getElementById('sortButton');
function isNumeric(n) { //Проверка на число
return !isNaN(parseFloat(n)) && isFinite(n)
}
function checkArr(arr) { //Проверяем, всё ли верно ввёл пользователь
for(i=0; i<arr.length; i++) {
number=arr[i];
if(!isNumeric(number)) {
alert('Вы допустили ошибку при вводе');
return false;
}
}
return true;
}
showButton.onclick=function() { //выводим таблицу
var arr=document.getElementById('arr').value.split(',');
if(!checkArr(arr)) return;
showButton.onclick=null;
var div=document.getElementById('sort');
var table="<table><tr>";
for(i=0; i<arr.length; i++) {
table+='<td>'+arr[i]+'</td>';
}
table+='</tr></table>'
div.innerHTML+=table;
}
sortButton.onclick=function() { //сортируем
var tds=document.getElementsByTagName('td');
var tmp=[]
for (var i = tds.length - 1; i > 0; i--) {
for (var j = 0; j < i; j++) {
if (tds[j].innerHTML > tds[j+1].innerHTML) {
tmp = tds[j].innerHTML;
tds[j].innerHTML = tds[j+1].innerHTML;
tds[j+1].innerHTML = tmp;
}
}
}
}
}
new SortBubble();
</script>
</body>
</html>
|
Цитата:
http://javascript.ru/blog/Andrej-Par...cii-JavaScript |
похоже не правильно вопрос сформулировал(
я элементы массива помещаю в ячейки таблицы, и потом беру данные из таблицы и сортирую, но проблема то в чем, я не знаю как тормознуть цикл, чтобы сортировка шла как бы пошагово, чтобы было видно как это дело всё сортируется setTimeut/Interval тут не подходит, вот я и впал в ступор=( |
Цитата:
|
может визуально имели ввиду так?)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
(function(){
var a = [1,4,5,6,4,9,12,8];
for(var i = 0; i < a.length; i++) {
if(a[i] > a[i+1]) {
var buf = a[i];
a[i] = a[i+1];
a[i+1] = buf;
document.write(a + "</br>");
i = 0;
}
}
})()
</script>
</head>
<body>
</body>
</html>
|
Если кому интересно, почти сделал) осталось некоторые баги поправить, почистить код и на jq переделать)
http://learn.javascript.ru/play/a8BgK |
Просто в задание указано, что надо на jq написать, а я пока с jq на вы, только на родном js'е писал.
|
| Часовой пояс GMT +3, время: 16:39. |