任务八：JavaScript和树（二）

2023年7月6日 272次阅读 来源: 海藻web开发

任务描述

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


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>task7</title>
</head>

<body>
    <h1>二叉树递归前中后序查询</h1>
    <div id="wrapper" style="background-color: rgb(255, 255, 255);">a
        <div class="layer_1" style="background-color: rgb(255, 255, 255);">b
            <div class="layer_2" style="background-color: rgb(255, 255, 255);">c
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">d</div>
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">e</div>
            </div>
            <div class="layer_2" style="background-color: rgb(255, 255, 255);">f
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">g</div>
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">k</div>
            </div>
        </div>
        <div class="layer_1" style="background-color: rgb(255, 255, 255);">l
            <div class="layer_2" style="background-color: rgb(255, 255, 255);">m
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">n</div>
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">o</div>
            </div>
            <div class="layer_2" style="background-color: rgb(255, 255, 255);">p
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">q</div>
                <div class="layer_3" style="background-color: rgb(255, 255, 255);">r</div>
            </div>
        </div>
    </div>
    <select name="" id="select">
        <option value="0">前序遍历查询</option>
        <option value="1">中序遍历查询</option>
        <option value="2">后序遍历查询</option>
    </select>
    <input type="" name="input" id="input" value="" />
    <input type="button" name="button" id="button" value="查询" />
<style>
    #wrapper,#wrapper div{
        display: flex;
      flex-direction: row;
      padding: 15px 10px;
      margin: 5px;
      border: 1px solid #000;
      background-color: #fff;
    }
    #wrapper {
  width: 760px;
  height: 240px; 
}

.layer_1 {
  width: 340px;
  height: 200px; 
}

.layer_2 {
  width: 135px;
  height: 160px; 
}

.layer_3 {
  width: 52.5px;
  height: 120px;
}</style>
<script type="text/javascript">
    var wrapper=document.getElementById("wrapper");
    var arr=[];
function tree(obj,num){
    if(num==0){
        arr.push(obj);
    }
    if(obj.children[0]){
        tree(obj.children[0],num);
    }
    if(num==1){arr.push(obj);}
    if(obj.children[1]){
        tree(obj.children[1],num);
    }
    if(num==2){arr.push(obj);}
}
var inp=document.getElementById("input");
var sel=document.getElementById("select");
var tex=null;
document.getElementById("button").addEventListener('click',function(){
        tex=inp.value;
        var val2=sel.value;
        tree(wrapper,val2,tex);
        var length=arr.length;
        var i=0;
        var timer=setInterval(function(){
            if(i){arr[i-1].style.backgroundColor='';}
            arr[i].style.backgroundColor='blue';
            var newarr=arr[i].innerText.split('\n');
            if(newarr[0]==tex){
                alert('找到了')
                clearInterval(timer);
            }
            i++;
            if(i>=length){
                clearInterval(timer);
                alert('未找到')
                setTimeout(function(){
                    arr[i-1].style.backgroundColor='';
                },500)
            }
        },500)
})
</script>
</body></html>
    原文作者：海藻web开发
    原文地址: https://www.jianshu.com/p/9a5afac94a3b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞