26任务二十六——多叉树遍历内容查找

Posted 2020-08-09 cjlalala

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了26任务二十六——多叉树遍历内容查找相关的知识，希望对你有一定的参考价值。

0、题目

基于任务22，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容
提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
当前被遍历到的节点做一个特殊显示（比如不同的颜色）
每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致

1、解题过程

<!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任务二十六——多叉树遍历内容查找的主要内容，如果未能解决你的问题，请参考以下文章

Python非递归遍历多叉树

好记性不如烂笔头创建一颗用于快速查找数据的多叉树

二叉树的非递归遍历

Gym - 101334E 多叉树遍历

B 树 B+树