26、任务二十三——多叉树遍历、内容查找
0、题目
- 基于任务22，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容
- 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
- 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
- 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
- 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致
1、解题过程
task23.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>IFE JavaScript Task 23</title> 6 <style> 7 div{ 8 display: inline-block; 9 border:1px solid black; 10 box-sizing: border-box; 11 } 12 .one{ 13 height:140px; 14 padding:10px; 15 } 16 .two{ 17 height:120px; 18 padding:10px; 19 } 20 .three{ 21 height:100px; 22 padding:10px; 23 } 24 .four{ 25 height:80px; 26 padding:10px; 27 } 28 .five{ 29 width:60px; 30 height:60px; 31 } 32 button{ 33 margin:50px; 34 height:30px; 35 width:50px; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="super" class="one"> 41 Super 42 <div class="two"> 43 Car 44 <div class="three"> 45 Apple 46 <div class="four">Poor</div> 47 <div class="four">Pig</div> 48 <div class="four">Cola</div> 49 <div class="four">Soccer</div> 50 </div> 51 <div class="three"> 52 Phone 53 </div> 54 <div class="three"> 55 <div class="four">Book</div> 56 <div class="four">School</div> 57 </div> 58 </div> 59 <div class="two"> 60 Note 61 <div class="three"> 62 Human 63 <div class="four">Code</div> 64 <div class="four">Operate</div> 65 <div class="four">Mon</div> 66 </div> 67 <div class="three"> 68 Progrom 69 <div class="four"> 70 Bement 71 <div class="five">Cat</div> 72 </div> 73 <div class="four">Glass</div> 74 </div> 75 </div> 76 <div class="two">Fish</div> 77 </div> 78 <button id="button">遍历</button> 79 <input type="text" id="input"> 80 <button id="check">查询</button> 81 82 <script type="text/javascript" src="task23.js"></script> 83 </body> 84 </html>
task23.js
1 var tree=document.getElementById("super"), 2 list=[], 3 a=undefined, 4 timer=null, 5 check=document.getElementById("check"), 6 button=document.getElementById("button"); 7 //深度优先遍历 8 function travel(node){ 9 if(node!=null){ 10 list.push(node); 11 for(var i=0;i<node.children.length;i++){ 12 if(node.children[i].nodeType==1){ 13 travel(node.children[i]); 14 } 15 } 16 } 17 } 18 //依次改变数组list中的元素背景颜色 19 function show(a){ 20 var input=document.getElementById('input').value; 21 i = 0; 22 list[i].style.backgroundColor='blue'; 23 timer = setInterval(function () { 24 i++; 25 if (i < list.length) { 26 var content=list[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") ; 27 if(input==content&&content&&a==1){ 28 clearInterval(timer); 29 list[i].style.backgroundColor="red"; 30 list[i-1].style.backgroundColor="#fff"; 31 } 32 else{ 33 list[i-1].style.backgroundColor = '#fff'; 34 list[i].style.backgroundColor = 'blue'; 35 } 36 } 37 else { 38 clearInterval(timer); 39 list[list.length-1].style.backgroundColor = '#fff'; 40 if(a==1) alert("未找到输入的值！"); 41 } 42 },500); 43 } 44 //深度优先遍历 45 button.addEventListener("click",function(){ 46 origin(); 47 travel(tree); 48 show(0); 49 }); 50 //查询函数 51 check.addEventListener("click",function(){ 52 origin(); 53 travel(tree); 54 show(1); 55 }); 56 //初始状态 57 function origin(){ 58 list=[]; 59 clearInterval(timer); 60 var divs=document.getElementsByTagName("div"); 61 for(var i=0;i<divs.length;i++){ 62 divs[i].style.backgroundColor="#fff"; 63 } 64 }
