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

时间：2016-09-17 00:27:23 阅读：316 评论：0 收藏：0 [点我收藏+]

标签：

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、任务二十六——多叉树遍历、内容查找

标签：

原文地址：http://www.cnblogs.com/cjlalala/p/5877553.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行