首页 > 代码库 > 26、任务二十六——多叉树遍历、内容查找
26、任务二十六——多叉树遍历、内容查找
0、题目
- 基于任务22，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容
- 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
- 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
- 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
- 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致
1、解题过程
task23.html
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>IFE JavaScript Task 22</title> <style> div{ display: inline-block; border:1px solid black; box-sizing: border-box; } .one{ height:140px; padding:10px; } .two{ height:120px; padding:10px; } .three{ height:100px; padding:10px; } .four{ height:80px; padding:10px; } .five{ width:60px; height:60px; } button{ margin:50px; height:30px; width:50px; } </style> </head><body> <div id="super" class="one"> Super <div class="two"> Car <div class="three"> Apple <div class="four">Poor</div> <div class="four">Pig</div> <div class="four">Cola</div> <div class="four">Soccer</div> </div> <div class="three"> Phone </div> <div class="three"> <div class="four">Book</div> <div class="four">School</div> </div> </div> <div class="two"> Note <div class="three"> Human <div class="four">Code</div> <div class="four">Operate</div> <div class="four">Mon</div> </div> <div class="three"> Progrom <div class="four"> Bement <div class="five">Cat</div> </div> <div class="four">Glass</div> </div> </div> <div class="two">Fish</div> </div> <button id="button">遍历</button> <input type="text" id="input"> <button id="check">查询</button><script type="text/javascript" src="task23.js"></script></body></html>
task23.js
var tree=document.getElementById("super"), list=[], a=undefined, timer=null, check=document.getElementById("check");//先序遍历function preOrder(node){ if(node!=null){ list.push(node); var length=node.children.length; if(length>0){ for(var i=0;i<length;i++){ if(node.children[i].nodeType==1){ preOrder(node.children[i]); } } } }}//依次改变数组list中的元素背景颜色function show(a){ var input=document.getElementById(‘input‘).value; i = 0; list[i].style.backgroundColor=‘blue‘; timer = setInterval(function () { i++; if (i < list.length) { var content=list[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") ; if(input==content&&content){ clearInterval(timer); list[i].style.backgroundColor="red"; list[i-1].style.backgroundColor="#fff"; } else{ list[i-1].style.backgroundColor = ‘#fff‘; list[i].style.backgroundColor = ‘blue‘; } } else { clearInterval(timer); list[list.length-1].style.backgroundColor = ‘#fff‘; if(a==1) alert("未找到输入的值！"); } },500);}document.getElementById("button").addEventListener("click",function(){ origin(); preOrder(tree); show(0);});//查询函数function test(node){ if(node!=null){ list.push(node); var length=node.children.length; if(length>0){ for(var i=0;i<length;i++){ if(node.children[i].nodeType==1){ preOrder(node.children[i]); } } } }}check.onclick=function(){ origin(); test(tree); show(1);}//初始状态function origin(){ list=[]; clearInterval(timer); var divs=document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].style.backgroundColor="#fff"; }}
2、遇到的问题
26、任务二十六——多叉树遍历、内容查找
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。