タスクの説明

タスク7に基づいて、例示的な図を参照して、二叉木をマルチフォークツリーに変更し、各ノードに内容付きのボタンを提供し、表示が遍歴を開始し、クリックすると、現在遍歴されているノードをアニメーション形式で提示して特殊な表示(例えば異なる色)を行い、一定時間(500 ms、1 sなどの時間ごとに)次のノードを遍歴して入力ボックスと「クエリー」ボタンを追加します.ボタンをクリックすると、木の中でノードの内容と入力ボックスの内容が一致するノードをアニメーション形式で検索し始め、見つけたら特殊なスタイルでノードを表示し、見つからないと見つからないヒントを与えます.クエリー・プロシージャの表示プロシージャと遍歴プロシージャは一貫性を保つ

    
ツリー      クエリー
    
a
        
b
            
c
                
d
                
e
            
            
f
                
g
                
k
            
        
        
l
            
m
                
n
                
o
            
            
p
                
q
                
r
            
        
    
    
              
              
              
    
    
    


    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('
');
            if(newarr[0]==tex){
                alert('   ')
                clearInterval(timer);
            }
            i++;
            if(i>=length){
                clearInterval(timer);
                alert('   ')
                setTimeout(function(){
                    arr[i-1].style.backgroundColor='';
                },500)
            }
        },500)
})