任務(wù)描述
基于任務(wù)七，參考示例圖，將二叉樹變成了多叉樹霞怀，并且每一個節(jié)點中帶有內(nèi)容
提供一個按鈕，顯示開始遍歷莉给，點擊后毙石，以動畫的形式呈現(xiàn)遍歷的過程
當(dāng)前被遍歷到的節(jié)點做一個特殊顯示（比如不同的顏色）
每隔一段時間（500ms，1s等時間自定）再遍歷下一個節(jié)點
增加一個輸入框及一個“查詢”按鈕颓遏，點擊按鈕時徐矩，開始在樹中以動畫形式查找節(jié)點內(nèi)容和輸入框中內(nèi)容一致的節(jié)點，找到后以特殊樣式顯示該節(jié)點叁幢，找不到的話給出找不到的提示滤灯。查詢過程中的展示過程和遍歷過程保持一致
<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>
