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>