學(xué)習(xí)二叉樹遞歸
屬于最簡單的遞歸
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>task7</title>
</head>
<body>
<div id="wrapper" style="background-color: rgb(255, 255, 255);">
<div class="layer_1" style="background-color: rgb(255, 255, 255);">
<div class="layer_2" style="background-color: rgb(255, 255, 255);">
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
</div>
<div class="layer_2" style="background-color: rgb(255, 255, 255);">
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
</div>
</div>
<div class="layer_1" style="background-color: rgb(255, 255, 255);">
<div class="layer_2" style="background-color: rgb(255, 255, 255);">
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
</div>
<div class="layer_2" style="background-color: rgb(255, 255, 255);">
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
<div class="layer_3" style="background-color: rgb(255, 255, 255);"></div>
</div>
</div>
</div>
<div id="control-box">
<input type="button" id="preorder" value="前序遍歷">
<input type="button" id="inorder" value="中序遍歷">
<input type="button" id="postorder" value="后序遍歷">
</div>
<style>
#wrapper,#wrapper div{
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
}
#wrapper {
width: 730px;
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);}
}
//0是前序 1是中序 2 是后續(xù)排列
document.querySelectorAll('#control-box input').forEach(function(ev,index){
ev.addEventListener('click',function(){
arr=[];
tree(wrapper,index);
var length=arr.length;
var i=0;
var timer=setInterval(function(){
if(i){arr[i-1].style.backgroundColor='';}
arr[i].style.backgroundColor='blue';
i++;
if(i>=length){
clearInterval(timer);
setTimeout(function(){
arr[i-1].style.backgroundColor='';
},500)
}
},500)
})
})
</script>
</body></html>
