//后序遍历
function postOrder(tree) {
console.log(tree);
if (tree !== null) {
postOrder(tree.firstElementChild);
postOrder(tree.lastElementChild);
traverse.push(tree);
}
}
postOrder(tree.firstElementChild) = A, postOrder(tree.lastElementChild) = b 数组traverse = C
函数执行过程 前三次执行函数A,得到tree = 1,2,3,4 , 添加4，返回到3，将3作为参数执行B函数，得到4，添加4，然后添加3，冒泡到2，将2作为参数执行B函数，得到3，将3作为参数执行A，得到4，添加4，将3作为参数执行B，得到4，
B = 3，4,先添加4，再添加3，接着添加A的2，然后冒泡到1，将1作为参数执行B，得到2，将2作为参数执行A，得到3，将3作为参数再执行A，得到4，添加4，添加3之前将3作为参数执行B，得到4，添加4，接着添加3；冒泡到2；将2作为参数执行B;得到3；将3作为参数执行A，得到4，添加4，接着将3作为参数执行B,得到4，添加4，接着添加B的2，最后添加1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Binary Tree</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<div class="box-container">
<div class="level-1" id="top-level">
<div class="level-2">
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
</div>
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
<div class="level-2">
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
</div>
<div class="level-3">
<div class="level-4"></div>
<div class="level-4"></div>
</div>
</div>
</div>
</div>
<div class="btn-container">
<input type="button" value="前序遍历" id="preorder">
<input type="button" value="中序遍历" id="inorder">
<input type="button" value="后序遍历" id="postorder">
</div>
<script>
var traverse = [];
var timer;
//先序遍历
function preOrder(tree) {
if (tree !== null) {
traverse.push(tree);
preOrder(tree.firstElementChild);
preOrder(tree.lastElementChild);
}
}
//中序遍历
function inOrder(tree) {
console.log(tree);
if (tree !== null) {
inOrder(tree.firstElementChild);
traverse.push(tree);
inOrder(tree.lastElementChild);
}
}
//后序遍历
function postOrder(tree) {
console.log(tree);
if (tree !== null) {
postOrder(tree.firstElementChild);
postOrder(tree.lastElementChild);
traverse.push(tree);
}
}
window.onload = function () {
var domTree = document.getElementById("top-level");
document.getElementById("preorder").onclick = function () {
clearTraverse();
preOrder(domTree);
animate(traverse);
console.log(traverse);
};
document.getElementById("inorder").onclick = function () {
clearTraverse();
inOrder(domTree);
animate(traverse);
console.log(traverse);
};
document.getElementById("postorder").onclick = function () {
clearTraverse();
postOrder(domTree);
animate(traverse);
console.log(traverse);
}
};
//清理前一个遍历
function clearTraverse() {
var allDiv = document.getElementsByTagName("div");
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].setAttribute("background","#fff");
}
clearInterval(timer);
traverse = [];
}
//将遍历结果用动画展示
function animate(traverse) {
var i = 0;
traverse[i].style.background = "#fec8b0";
timer = setInterval(function () {
i++;
if (i < traverse.length) {
traverse[i - 1].style.background = "#fff";
traverse[i].style.background = "#fec8b0"
}
else {
clearTraverse();
traverse[traverse.length - 1].style.background = "#fff";
}
},500);
}
</script>
</body>
</html>