/
insertionsort.html
149 lines (131 loc) · 4.5 KB
/
insertionsort.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>InsertionSort</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(253,254,254,0.74)";
// 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 = 1; i < inputArr.length; i++) {
for (var j = i; j > 0; j--) {
t++;
delyshowcomparecolor(inputArr,i,j, 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);
} else {
t++;
delyrevertcomparecolor(t * active_time);
break;
}
}
}
}
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>