-
Notifications
You must be signed in to change notification settings - Fork 2
/
22.html
137 lines (128 loc) · 3.49 KB
/
22.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
<html>
<head>
<meta charset="utf-8"/>
<script>
var id = 0;
var maxDeepth = 4;
function createBT(deepth){
var ele = document.createElement('span');
ele.id = id + "";
id += 1;
ele.className = 'borderedDiv';
if (deepth === maxDeepth) {
return ele;
}
ele.appendChild(createBT(deepth + 1));
ele.appendChild(createBT(deepth + 1));
return ele;
}
var timeDelay;
function preOrder(ele){
if (!ele) {
return ;
}
var sequence = [];
sequence = sequence.concat(ele);
sequence = sequence.concat(preOrder(ele.childNodes[0]));
sequence = sequence.concat(preOrder(ele.childNodes[1]));
return sequence;
}
function postOrder(ele){
if (!ele) {
return ;
}
var sequence = [];
sequence = sequence.concat(postOrder(ele.childNodes[0]));
sequence = sequence.concat(ele);
sequence = sequence.concat(postOrder(ele.childNodes[1]));
return sequence;
}
function middleOrder(ele){
if (!ele) {
return ;
}
var sequence = [];
sequence = sequence.concat(middleOrder(ele.childNodes[0]));
sequence = sequence.concat(ele);
sequence = sequence.concat(middleOrder(ele.childNodes[1]));
return sequence;
}
var animating = false;
function animated(sequence) {
animating = true;
sequence = sequence.filter((value) => {
return value != undefined;
})
var i = 0, length = sequence.length, lastOne;
var thisInterval = setInterval(() => {
if (i < length) {
if (lastOne) {
lastOne.className = 'borderedDiv';
}
lastOne = sequence[i];
sequence[i].className = sequence[i].className + ' currentNode';
i++;
} else {
animating = false;
lastOne.className = 'borderedDiv';
alert('Iterate success!');
clearInterval(thisInterval);
}
}, timeDelay);
}
function render(func) {
if (animating) {
alert('Animating, please wait.');
return;
}
var delayInput = document.getElementById('delay');
var delay = delayInput.value;
if(!isNaN(delay)) {
timeDelay = delay;
} else {
alert('输入错误，恢复默认1000。');
delayInput.value = 1000;
timeDelay = 1000;
}
var area = document.getElementById('renderArea');
animated(func(area.childNodes[1]));
};
window.onload = function() {
var area = document.getElementById('renderArea');
area.appendChild(createBT(1));
}
</script>
<style>
.borderedDiv {
display: inline-block;
padding: 10px;
margin: 5px;
min-width: 20px;
min-height: 20px;
border: 2px solid #789;
}
.currentNode {
background-color: rgba(123, 123, 123, 0.5);
}
button {
font-size: 16px;
color: white;
padding: 20px;
background-color: #ABC;
margin: 20 auto;
}
</style>
</head>
<body style="display:flex">
<div style="flex:1"></div>
<div style="width:100px; flex:0.5">
<label>请输入延迟</label><input type="text" id='delay' value="1000"></input>
<button onclick="render(preOrder)">先序遍历</button>
<button onclick="render(middleOrder)">中序遍历</button>
<button onclick="render(postOrder)">后序遍历</button>
</div>
<div id="renderArea" style="margin: auto;">
</div>
<div style="flex:1"></div>
</body>
</html>