JavaScript和樹(一)

任務描述

• 參考示例圖，在頁面中展示一顆二叉樹的結構
• 提供一個按鈕，顯示開始遍歷，點擊後，以動畫的形式呈現遍歷的過程
• 二叉樹的遍歷算法和方式自定，前序中序後序皆可，但推薦能夠提供多種算法的展現（增長多個按鈕，每一個按鈕對應不一樣的算法）
• 當前被遍歷到的節點作一個特殊顯示（好比不一樣的顏色）
• 每隔一段時間（500ms，1s等時間自定）再遍歷下一個節點

 

 

先製做一個二叉樹的結構和按鈕組

經過flex佈局，

justify-content: center;//水平居中

align-items: center;//垂直居中

 

而後設計遍歷，http://www.javashuo.com/article/p-vuxboynr-p.html有關遍歷介紹

須要將樹結構進行遍歷，顯示出遍歷的顏色

首先進行樹的遍歷，把遍歷順序記錄在數組中，而後根據數組順序，進行顏色變化

 

//先序遍歷

function preOrder(node){

    if(!node == null){

        putstr(node.show()+ " ");

        preOrder(node.left);

        preOrder(node.right);

    }

}

//前序遍歷

           function preOrder(node){

                 if(node !=null){

                      data.push(node);

                preOrder(node.firstElementChild);

                preOrder(node.lastElementChild);

                 }

           }

 

head取出數組中的節點數據；並將對應的節點的顏色進行修改

head = data.shift();//刪除並返回數組的第一個元素

                 if(head){

                      head.style.backgroundColor = "#ff0000";

                      timer = setTimeout(function(){

                            head.style.backgroundColor = "#fff";

                            show();

                      },500);

                 }

 

完整：https://github.com/moeeliu/ife/blob/master/js7.html