<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>直接插入排序(Straight Insertion Sort)</title>
<link href="bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/common.css">
<script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script>
var left = 200;
var eleWidth = 60;
var marginWidth = 20;
var size = 10;
var eleTop = 300;
var pop = 400;
var middle = 150;
function genNumArray() {
var numArray = new Array(size);
for (var i = 0; i < size; i++) {
var num = Math.floor((Math.random() * 100));
if (num == 0) {
num += 1;
} else if (num == 100) {
num -= 1;
}
numArray[i] = num;
}
return numArray;
}
function insertSort(numArray) {
for (var i = 1; i < numArray.length; i++) {
var value1 = numArray[i];
for (var j = i - 1; j > -1; j--) {
var value2 = numArray[j];
if (value2 > value1) {
numArray[j + 1] = value2;
numArray[j] = value1;
}
}
}
console.log(numArray)
}
function oneLoop(start, end, numArray) {
if (start < end) {
var value = numArray[start];
selectElement(start);
moveElement(start, middle+"px", function () {
var secondIndex = start - 1;
secondLoop(value, start, secondIndex, end, null, numArray);
});
} else {
console.log(numArray);
}
}
function secondLoop(value1, i, j, end, id, numArray) {
var value2 = numArray[j];
selectElement(j);
moveElement(j, middle+"px", function () {
if (value2 > value1) {
numArray[j + 1] = value2;
numArray[j] = value1;
var e1 = $("#" + (j + 1));
var e2 = $("#" + j);
e1.attr("id", j);
e2.attr("id", (j + 1));
var e1Left = e2.offset().left + "px";
var e2Left = e1.offset().left + "px";
e1.animate({left: e1Left});
e2.animate({left: e2Left}, function () {
moveElement((j + 1), 400+"px", function () {
unSelectElement((j + 1));
if (j != 0) {
secondLoop(value1, i, (j - 1), end, j, numArray);
} else {
moveElement(j, 400+"px", function () {
unSelectElement(j);
oneLoop(i + 1, end, numArray);
});
}
});
});
} else {
if (j != 0) {
moveElement(j, pop+"px", function () {
unSelectElement(j);
secondLoop(value1, i, (j - 1), end, id, numArray);
});
} else {
moveElement(j, pop+"px", function () {
unSelectElement(j);
if (id) {
moveElement(id, pop+"px", function () {
unSelectElement(id);
oneLoop(i + 1, end, numArray);
});
} else {
moveElement(i, pop+"px", function () {
unSelectElement(i);
oneLoop(i + 1, end, numArray);
});
}
});
}
}
})
}
function selectElement(id) {
var e = $('#' + id);
$(e).attr("class", "number-select");
}
function unSelectElement(id) {
var e = $("#" + id);
$(e).attr("class", "number");
}
function moveElement(id, top, callback) {
var e = $("#" + id);
if (!top) {
top = e.offset().top + "px";
}
$(e).animate({top: top}, callback);
}
$(document).ready(function () {
var numArray = genNumArray();
var content = "";
$(numArray).each(function (i) {
content += '<div id="rectangle' + i + '"class="rectangle" style="left:' + (left + i * eleWidth) + 'px;top:'+eleTop+'px;"></div>';
});
$("body").html($("body").html() + content);
$(numArray).each(function (i, item) {
$("body").html($("body").html() + '<div id="' + i + '" class="number" style="z-index:9999;left:' + (left + i * eleWidth + marginWidth) + 'px;top:'+(eleTop+100)+'px;">' + item + '</div>')
});
$('#startBtn').click(function () {
oneLoop(1, size, numArray);
});
});
</script>
</head>
<body>
<h4 class="page-header">插入排序—直接插入排序(Straight Insertion Sort)</h4>
<dl>
<dt>基本思想</dt>
<dd>将一个记录插入到已排序好的有序表中,从而得到一个新记录数增1的有序表。即:先将序列的第1个记录看成是一个有序的子序列,然后从第2个记录逐个进行插入,直至整个序列有序为止。</dd>
<dd>如果一个已有元素和插入元素是相等的,那么将把插入元素放在相等元素的后面。所以,相等元素的前后顺序没有改变,所以插入排序是<span style="font-weight:bold;color: red">稳定</span>的。</dd>
</dl>
<button id="startBtn">开始排序</button>
</body>
</html>
直接插入排序(Straight Insertion Sort)
最新推荐文章于 2022-07-03 12:53:05 发布