Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
jiangchi add singleton d096ae8 May 7, 2019
0 contributors

Users who have contributed to this file

147 lines (130 sloc) 4.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BubbleSort</title>
</head>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div id="bubbleSortdiv"></div>
<script type="text/javascript">
function alertprint(item) {
console.log(JSON.stringify(item));
}
var canvas_width = 500;
var canvas_hight = 200;
var canvas_hight_half = canvas_hight / 2;
var canvas_background_color = "rgba(0,110,169,0.79)";
var canvas_item_color = "rgba(255,255,255,1)";
// var inputArr = [1, 4, 2, 6];
// var item_max = 6;
var inputArr = [3, 44, 38, 5,47,15,36,26,27];
var item_max = 47;
// var inputArr = [1, 17, 6, 9, 2, 4, 100, 38, 94, 29, 46, 3, 57, 65, 19, 5];
// var item_max = 100;
var item_jianju = 10;
var item_width_common = canvas_width / inputArr.length - item_jianju;
var item_hight_max = canvas_hight_half * 0.9;
var item_hight_min = 15;
var active_time = 150;
//初始化背景
var inibg = function () {
$("#bubbleSortdiv").css("background", canvas_background_color);
$("#bubbleSortdiv").css("height", canvas_hight + "px");
$("#bubbleSortdiv").css("width", canvas_width + "px");
$("#bubbleSortdiv").css("position", "relative");
}
//初始化数组
var iniarr = function () {
for (i in inputArr) {
//创建div并加到背景div中
var item_hight = (item_hight_max - item_hight_min) * inputArr[i] / item_max + item_hight_min;
var newdiv = $("<div></div>");
newdiv.attr("id", "item_" + i);
newdiv.attr("value", inputArr[i]);
newdiv.append("<span>" + inputArr[i] + "</span>");
newdiv.css("background", canvas_item_color);
newdiv.addClass("arritem");
newdiv.css("height", item_hight);
newdiv.css("width", item_width_common);
newdiv.css("position", "absolute");
newdiv.css("bottom", canvas_hight_half + "px");
newdiv.css("left", i * (item_width_common + item_jianju) + "px");
newdiv.appendTo($("#bubbleSortdiv"));
}
}
//比较两个数高亮
var showcomparecolor = function (x, y) {
$("#item_" + x).css("background", "rgba(255,255,0,1)");
$("#item_" + y).css("background", "rgba(255,255,0,1)");
}
//比较两个数高亮恢复
var revertcomparecolor = function () {
$(".arritem").css("background", canvas_item_color);
}
var realdoswap = function (arr, x, y) {
var tmp = arr[x];
arr[x] = arr[y];
arr[y] = tmp;
}
var doswap = function (arr, x, y) {
var itemx = $("#item_" + x);
var itemy = $("#item_" + y);
var leftx = itemx.css("left");
var lefty = itemy.css("left");
setTimeout(function () {
itemx.css("bottom", canvas_hight_half - 5 - itemx.height());
},0);
setTimeout(function () {
itemy.attr("id", "item_" + x);
itemy.css("left", leftx);
},active_time * 1);
setTimeout(function () {
itemx.attr("id", "item_" + y);
itemx.css("left", lefty);
},active_time * 2);
itemy.insertBefore(itemx);
setTimeout(function () {
itemx.css("bottom", canvas_hight_half);
},active_time * 3);
}
var sort = function () {
var t = 0;
for (var i = 0; i < inputArr.length; i++) {
for (var j = 0; j < inputArr.length - 1 - i; j++) {
alertprint(i+":"+j);
t++;
delyshowcomparecolor(inputArr,j,j+1, t * active_time);
if (inputArr[j] > inputArr[j + 1]) {
realdoswap(inputArr, j, j + 1);
t++;
delydoswap(inputArr, j, j + 1, t * active_time);
t+=4;
delyrevertcomparecolor(t * active_time);
}
t++;
delyrevertcomparecolor(t * active_time);
}
}
}
inibg();
iniarr();
sort();
function delyshowcomparecolor(arr, i, j, t) {
setTimeout(function () {
showcomparecolor(j, j - 1);
},t);
}
function delyrevertcomparecolor(t) {
setTimeout(function () {
revertcomparecolor();
},t);
}
function delydoswap (arr, x, y, t) {
setTimeout(function () {
doswap(arr,x,y,t);
},t);
}
</script>
</body>
</html>
You can’t perform that action at this time.