-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIFE test 7.html
167 lines (167 loc) · 4.26 KB
/
IFE test 7.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!--
1.参考示例图，在页面中展现一颗二叉树的结构;
2.提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程;
3.二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）;
4.当前被遍历到的节点做一个特殊显示（比如不同的颜色）;
5.每隔一段时间（500ms，1s等时间自定）再遍历下一个节点.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#tree{
position:relative;
margin: 0 auto;
width:1200px;
height:400px;
top:140px;
}
#boxone{
position:absolute;
width:1200px;
height:400px;
border:2px solid black;
background-color:white;
}
#boxtwo{
position:absolute;
margin:20px;
width:560px;
height:360px;
border:2px solid black;
background-color:white;
}
#boxthree{
position:absolute;
margin:20px;
width:240px;
height:320px;
border:2px solid black;
background-color:white;
}
#boxfour{
position:absolute;
margin:20px;
width:80px;
height:280px;
border:2px solid black;
background-color:white;
}
</style>
</head>
<body>
<div id="tree">
<div id="boxone">
<div id="boxtwo" style="left:0;">
<div id="boxthree" style="left:0;">
<div id="boxfour" style="left:0;">
</div>
<div id="boxfour" style="right:0;">
</div>
</div>
<div id="boxthree" style="right:0;">
<div id="boxfour" style="left:0;">
</div>
<div id="boxfour" style="right:0;">
</div>
</div>
</div>
<div id="boxtwo" style="right:0;">
<div id="boxthree" style="left:0;">
<div id="boxfour" style="left:0;">
</div>
<div id="boxfour" style="right:0;">
</div>
</div>
<div id="boxthree" style="right:0;">
<div id="boxfour" style="left:0;">
</div>
<div id="boxfour" style="right:0;">
</div>
</div>
</div>
</div>
</div>
<div style="position:relative;top:160px;height:20px;width:285px;margin: 0 auto;">
<input id="qianxu" value="前序遍历" type="button"></input>
<input id="zhongxu" value="中序遍历" type="button"></input>
<input id="houxu" value="后序遍历" type="button"></input>
<input id="clear" value="清屏" type="button"></input>
</div>
<script>
document.getElementById("qianxu").onclick=function(){
var nodelist=new Array();
var j=0;
function getnode(node){
nodelist[j]=node;
j++;
}//遍历过的元素节点构成一个数组
function inOrder(node){
if(!(node==null)){
inOrder(node.children[0]);
getnode(node);
inOrder(node.children[1]);
}
}
var newnode=document.getElementById("tree").getElementsByTagName("div");
inOrder(newnode[0]);
var k=0;
var time=setInterval(function(){
nodelist[k].style.backgroundColor="red";
k++;
},500);//0.5秒后变色，setInterval函数的机制需要研究一下(
}//前序遍历
document.getElementById("zhongxu").onclick=function(){
var nodelist=new Array();
var j=0;
function getnode(node){
nodelist[j]=node;
j++;
}
function inOrder(node){
if(!(node==null)){
getnode(node);
inOrder(node.children[0]);
inOrder(node.children[1]);
}
}
var newnode=document.getElementById("tree").getElementsByTagName("div");
inOrder(newnode[0]);
var k=0;
var time=setInterval(function(){
nodelist[k].style.backgroundColor="red";
k++;
},500);
}//中序遍历
document.getElementById("houxu").onclick=function(){
var nodelist=new Array();
var j=0;
function getnode(node){
nodelist[j]=node;
j++;
}
function inOrder(node){
if(!(node==null)){
inOrder(node.children[0]);
inOrder(node.children[1]);
getnode(node);
}
}
var newnode=document.getElementById("tree").getElementsByTagName("div");
inOrder(newnode[0]);
var k=0;
var time=setInterval(function(){
nodelist[k].style.backgroundColor="red";
k++;
},500);
}//后序遍历
document.getElementById("clear").onclick=function(){
var newnode=document.getElementById("tree").getElementsByTagName("div");
for(var i in newnode){
newnode[i].style.backgroundColor="white";
}
}//清屏
</script>
</body>
</html>