任务目的
- 熟练JavaScript
- 学习树这种数据结构的基本知识
任务描述
- 在页面中展现一颗二叉树的结构
- 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
- 二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示
- 增加多个按钮，每个按钮对应不同的算法）
- 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
- 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
整体思路
二叉树还是容易的，直接利用div在页面展现一个二叉树结构，然后放上三个变量按钮
<div id="tree_wrap">
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>
</div>
<button id="dlr">前序遍历</button>
<button id="ldr">中序遍历</button>
<button id="lrd">后序遍历</button>
由于题目要求能够对遍历可视化，这里就把遍历后的节点保存在一个数组中，这样既记录了节点，又保存了节点的变量顺序，最后对数组进行可视化遍历即可。
首先给button添加点击事件
//根据不同的按钮调用不同的排序算法
function btnHandle(){
var id = event.target.id;
var tree = $("tree_wrap");
switch(id){
case 'dlr':
dlr(tree);
break;
case 'ldr':
ldr(tree);
break;
case 'lrd':
lrd(tree);
break;
}
renderData();
}
function init(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++){
addHandler(btns[i],"click",btnHandle);
}
}
init();
用递归把三种遍历函数写出来
//前序遍历
function dlr(node){
if(node){
nodeArray.push(node);
dlr(node.firstElementChild);
dlr(node.lastElementChild);
}
}
//中序遍历
function ldr(node){
if(node){
ldr(node.firstElementChild);
nodeArray.push(node);
ldr(node.lastElementChild);
}
}
//后序遍历
function lrd(node){
if(node){
lrd(node.firstElementChild);
lrd(node.lastElementChild);
nodeArray.push(node);
}
}
最后利用 setInterval 函数把遍历过程渲染出来，这里可以写一个renderData函数
//存储遍历后的节点
var nodeArray = [];
//渲染数据
function renderData(){
var timer = null,i=0;
timer =setInterval(run,500);
function run(){
if(i<nodeArray.length){
if(i-1 > -1){
//清除上一个节点的背景色
nodeArray[i-1].className = "";
}
nodeArray[i].className = "selected";
i++;
}else{
//清除最一个节点的背景色
nodeArray[i-1].className = "";
clearInterval(timer);
nodeArray = [];
return;
}
}
console.log(nodeArray);
}