-
Notifications
You must be signed in to change notification settings - Fork 0
/
IFE test 8.html
157 lines (157 loc) · 4.74 KB
/
IFE test 8.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
<!--
1.基于任务七，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容;
2.提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程;
3.当前被遍历到的节点做一个特殊显示（比如不同的颜色）;
4.每隔一段时间（500ms，1s等时间自定）再遍历下一个节点;
5.增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，
找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style type="text/css">
#tree{
position:relative;
width:1200px;
height:200px;
margin: 0 auto;
top:200px;
}
#boxone{
position:absolute;
width:1200px;
height:200px;
border:2px solid black;
background-color:white;
margin:20px;
}
.boxtwo{
position:absolute;
height:140px;
border:2px solid black;
background-color:white;
margin:20px;
}
.boxthree{
position:absolute;
width:140px;
height:80px;
border:2px solid black;
background-color:white;
margin:20px;
}
</style>
</head>
<body>
<div id="tree">
<div id="boxone"><span>冠位七骑</span>
<div class="boxtwo" style="left:0;width:500px;"><span>上三骑</span>
<div class="boxthree" style="left:0;"><span>剑</span>
</div>
<div class="boxthree" style="left:160px;"><span>弓</span>
</div>
<div class="boxthree" style="right:0;"><span>枪</span>
</div>
</div>
<div class="boxtwo" style="left:520px;width:350px;"><span>下四骑</span>
<div class="boxthree" style="left:0;"><span>骑</span>
</div>
<div class="boxthree" style="right:0;"><span>术</span>
</div>
</div>
<div class="boxtwo" style="right:90px;width:180px;"><span>下四骑</span>
<div class="boxthree"><span>杀</span>
</div>
</div>
<div class="boxtwo" style="right:0;width:70px;"><span>狂</span>
</div>
</div>
</div>
<div style="position:relative;top:250px;width:480px;margin: 0 auto;">
<input id="digui" type="button" value="递归遍历"></input>
<input id="guangdu" type="button" value="广度优先"></input>
<input id="shendu" type="button" value="深度优先"></input>
<input id="clear" type="button" value="清屏"></input>
<input id="input" type="text"></input>
<input id="search" type="button" value="查询"></input>
</div>
<script>
document.getElementById("digui").onclick=function(){
var nodelist=new Array();
var treenode=document.getElementById("tree").getElementsByTagName("div");
function searchtreenodes(treenodes){
for(var i=0;i<treenodes.length;i++){
var childs=treenodes[i].children;
nodelist.push(treenodes[i]);
}
if(childs&&childs.length>0){
searchtreenodes(childs);
}
}
var i=0;
searchtreenodes(treenode);
var time=setInterval(function(){
nodelist[i].style.backgroundColor="red";
i++
},500);
}//递归遍历
document.getElementById("guangdu").onclick=function(){
var iterator1=function(treenodes){
if(!treenodes||!treenodes.length)
return;
var stack=[];
//先将第一层节点放入栈
for(var i=0,len=treeNodes.length;i<len;i++){
stack.push(treeNodes[i]);
}
var item;
while(stack.length) {
item=stack.shift();
//如果该节点有子节点，继续添加进入栈底
if(item.children&&item.children.length) {
//len = item.children.length;
// for (i = 0; i < len; i++) {
// stack.push(item.children[i]);
// }
stack=stack.concat(item.children);
}
}
}
}//广度优先遍历
document.getElementById("shendu").onclick=function(){
var iterator2=function(treenodes){
if(!treenodes||!treenodes.length)
return;
var stack=[];
//先将第一层节点放入栈
for(var i=0,len=treeNodes.length;i<len;i++){
stack.push(treeNodes[i]);
}
var item;
while(stack.length){
item = stack.shift();
//console.log(item.id);
//如果该节点有子节点，继续添加进入栈顶
if(item.children&&item.children.length){
// len = item.children.length;
// for (; len; len--) {
// stack.unshift(item.children[len - 1]);
// }
stack=item.children.concat(stack);
}
}
};
}//深度优先遍历
document.getElementById("clear").onclick=function(){
var clear=document.getElementById("tree").getElementsByTagName("div");
for(var i=0;i<clear.length;i++){
clear[i].style.backgroundColor="white";
}
}//清屏
document.getElementById("search").onclick=function(){
var input=document.getElementById("input").value;
}//查找
</script>
</body>
</html>