任务八：JavaScript和树（二）
2017-06-29 本文已影响0人
海藻web开发
任务描述
基于任务七，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容
提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
当前被遍历到的节点做一个特殊显示（比如不同的颜色）
每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>task7</title>
</head>
<body>
<h1>二叉树递归前中后序查询</h1>
<div id="wrapper" style="background-color: rgb(255, 255, 255);">a
<div class="layer_1" style="background-color: rgb(255, 255, 255);">b
<div class="layer_2" style="background-color: rgb(255, 255, 255);">c
<div class="layer_3" style="background-color: rgb(255, 255, 255);">d</div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);">e</div>
</div>
<div class="layer_2" style="background-color: rgb(255, 255, 255);">f
<div class="layer_3" style="background-color: rgb(255, 255, 255);">g</div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);">k</div>
</div>
</div>
<div class="layer_1" style="background-color: rgb(255, 255, 255);">l
<div class="layer_2" style="background-color: rgb(255, 255, 255);">m
<div class="layer_3" style="background-color: rgb(255, 255, 255);">n</div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);">o</div>
</div>
<div class="layer_2" style="background-color: rgb(255, 255, 255);">p
<div class="layer_3" style="background-color: rgb(255, 255, 255);">q</div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);">r</div>
</div>
</div>
</div>
<select name="" id="select">
<option value="0">前序遍历查询</option>
<option value="1">中序遍历查询</option>
<option value="2">后序遍历查询</option>
</select>
<input type="" name="input" id="input" value="" />
<input type="button" name="button" id="button" value="查询" />
<style>
#wrapper,#wrapper div{
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
}
#wrapper {
width: 760px;
height: 240px;
}
.layer_1 {
width: 340px;
height: 200px;
}
.layer_2 {
width: 135px;
height: 160px;
}
.layer_3 {
width: 52.5px;
height: 120px;
}</style>
<script type="text/javascript">
var wrapper=document.getElementById("wrapper");
var arr=[];
function tree(obj,num){
if(num==0){
arr.push(obj);
}
if(obj.children[0]){
tree(obj.children[0],num);
}
if(num==1){arr.push(obj);}
if(obj.children[1]){
tree(obj.children[1],num);
}
if(num==2){arr.push(obj);}
}
var inp=document.getElementById("input");
var sel=document.getElementById("select");
var tex=null;
document.getElementById("button").addEventListener('click',function(){
tex=inp.value;
var val2=sel.value;
tree(wrapper,val2,tex);
var length=arr.length;
var i=0;
var timer=setInterval(function(){
if(i){arr[i-1].style.backgroundColor='';}
arr[i].style.backgroundColor='blue';
var newarr=arr[i].innerText.split('\n');
if(newarr[0]==tex){
alert('找到了')
clearInterval(timer);
}
i++;
if(i>=length){
clearInterval(timer);
alert('未找到')
setTimeout(function(){
arr[i-1].style.backgroundColor='';
},500)
}
},500)
})
</script>
</body></html>
