25、任务二十二—

25、任务二十二——二叉树

0、题目

参考示例图，在页面中展现一颗二叉树的结构
提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
二叉树的遍历算法和方式自定，前序中序后序皆可，但推荐可以提供多种算法的展示（增加多个按钮，每个按钮对应不同的算法）
当前被遍历到的节点做一个特殊显示（比如不同的颜色）
每隔一段时间（500ms，1s等时间自定）再遍历下一个节点

1、解答过程

  1 <!DOCTYPE html>
  2 <html>
  3   <head>
  4     <meta charset="UTF-8">
  5     <title>IFE JavaScript Task 22</title>
  6     <style>
  7         div{
  8             display: inline-block;
  9             padding:20px;
 10             margin:3px;
 11             border:1px solid black;
 12         }
 13         span{
 14             display: block;
 15         }
 16         #button{
 17             margin-top:20px;
 18         }
 19         button{
 20             margin:20px;
 21             width:100px;
 22         }
 23     </style>
 24   </head>
 25 <body>
 26     <div id="tree">
 27         <div>
 28             <div>
 29                 <div></div>
 30                 <div></div>
 31             </div>
 32             <div>
 33                 <div></div>
 34                 <div></div>
 35             </div>
 36         </div>
 37         <div>
 38             <div>
 39                 <div></div>
 40                 <div></div>
 41             </div>
 42             <div>
 43                 <div></div>
 44                 <div></div>
 45             </div>
 46         </div>
 47     </div>
 48     <span id="button">
 49         <button id="pre">前序</button>
 50         <button id="in">中序</button>
 51         <button id="post">后序</button>
 52     </span>
 53 <script>
 54 var tree=document.getElementById("tree"),
 55     list=[],
 56     timer=null;
 57 //先序遍历
 58 function preOrder(node){
 59     if(node!=null){
 60         list.push(node);
 61         preOrder(node.firstElementChild);
 62         preOrder(node.lastElementChild);
 63     }
 64 }
 65 //中序遍历
 66 function inOrder(node){
 67     if(node!=null){
 68         inOrder(node.firstElementChild);
 69         list.push(node);
 70         inOrder(node.lastElementChild);
 71     }
 72 }
 73 //后序遍历
 74 function postOrder(node){
 75     if(node!=null){
 76         postOrder(node.firstElementChild);
 77         postOrder(node.lastElementChild);
 78         list.push(node);
 79     }
 80 }
 81 //依次改变数组list中的元素背景颜色
 82 function show(){
 83     var i = 0;
 84     list[i].style.backgroundColor='blue';
 85     timer = setInterval(function () {
 86         i++;
 87         if (i < list.length) {
 88             list[i-1].style.backgroundColor = '#fff';
 89             list[i].style.backgroundColor = 'blue';
 90         } else {
 91             clearInterval(timer);
 92             list[list.length-1].style.backgroundColor = '#fff';
 93         }
 94     },500)
 95 }
 96 //使用事件委托监听按钮点击事件
 97 var button=document.getElementById("button");
 98     button.addEventListener("click",function(e){
 99         switch(e.target.id){
100             case "pre":{
101                 origin();
102                 preOrder(tree);
103                 show();
104                 break;
105             }
106             case "in":{
107                 origin();
108                 inOrder(tree);
109                 show();
110                 break;
111             }
112             case "post":{
113                 origin();
114                 postOrder(tree);
115                 show();
116                 break;
117             }
118 　　　　}
119     })
120 //复位原始状态,防止不同按钮点击事件之间的冲突
121 function origin(){
122     list=[];
123     clearInterval(timer); 
124     var divs=document.getElementsByTagName("div");
125     for(var i=0;i<divs.length;i++){   //让所有元素的背景色均恢复至白色
126         divs[i].style.backgroundColor="white";
127     }
128 }
129 </script>
130 </body>
131 </html>