This time I will bring you the implementation method of pre-order, in-order and post-order traversal of JS binary tree. What are the precautions for implementing method of JS binary tree pre-order, in-order and post-order traversal? The following is a practical case, let’s take a look.
When I was learning data structures before, I learned the methods of pre-order, in-order, and post-order traversal of binary trees, and implemented them in C language. The following is the implementation of three traversals of binary trees using js, and animated Form shows the process of traversal. The entire traversal process still uses recursive thinking, and the principle is very crude and simple Function for preorder traversal:function preOrder(node){ if(!(node==null)){ pList.push(node); preOrder(node.firstElementChild); preOrder(node.lastElementChild); } }
function inOrder(node) { if (!(node == null)) { inOrder(node.firstElementChild); pList.push(node); inOrder(node.lastElementChild); } }
function postOrder(node) { if (!(node == null)) { postOrder(node.firstElementChild); postOrder(node.lastElementChild); pList.push(node); } }
function changeColor(){ var i=0; pList[i].style.backgroundColor = 'blue'; timer=setInterval(function(argument){ i++; if(i<pList.length){ pList[i-1].style.backgroundColor="#fff"; pList[i].style.backgroundColor="blue"; } else{ pList[pList.length-1].style.backgroundColor="#fff"; } },500) }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .root{ display: flex; padding: 20px; width: 1000px; height: 300px;border: 1px solid #000000; margin: 100px auto; margin-bottom: 10px; justify-content: space-between; } .child_1{ display: flex; padding: 20px; width: 450px; height: 260px;border: 1px solid red; justify-content: space-between; } .child_2{ display: flex; padding: 20px; width: 170px; height: 220px;border: 1px solid green; justify-content: space-between; } .child_3{ display: flex; padding: 20px; width: 35px; height: 180px;border: 1px solid blue; justify-content: space-between; } input{ margin-left: 100px; width: 60px; height: 40px; font:20px italic; } </style> </head> <body> <p class="root"> <p class="child_1"> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> </p> <p class="child_1"> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> <p class="child_2"> <p class="child_3"></p> <p class="child_3"></p> </p> </p> </p> <input type="button" value="先序"> <input type="button" value="中序"> <input type="button" value="后序"> <script type="text/javascript" src="遍历.js"></script> </body> </html>
/** * Created by hp on 2016/12/22. */ var btn = document.getElementsByTagName('input'), preBtn = btn[0], inBtn = btn[1], postBtn = btn[2], treeRoot = document.getElementsByClassName('root')[0], pList = [], timer = null; window.onload=function(){ preBtn.onclick = function () { reset(); preOrder(treeRoot); changeColor(); } inBtn.onclick = function () { reset(); inOrder(treeRoot); changeColor(); } postBtn.onclick = function () { reset(); postOrder(treeRoot); changeColor(); } } /*先序遍历*/ function preOrder(node){ if(!(node==null)){ pList.push(node); preOrder(node.firstElementChild); preOrder(node.lastElementChild); } } /*中序遍历*/ function inOrder(node) { if (!(node == null)) { inOrder(node.firstElementChild); pList.push(node); inOrder(node.lastElementChild); } } /*后序遍历*/ function postOrder(node) { if (!(node == null)) { postOrder(node.firstElementChild); postOrder(node.lastElementChild); pList.push(node); } } /*颜色变化函数*/ function changeColor(){ var i=0; pList[i].style.backgroundColor = 'blue'; timer=setInterval(function(argument){ i++; if(i<pList.length){ pList[i-1].style.backgroundColor="#fff"; pList[i].style.backgroundColor="blue"; } else{ pList[pList.length-1].style.backgroundColor="#fff"; } },500) } function reset(){ pList=[]; clearInterval(timer); var ps=document.getElementsByTagName("p"); for(var i=0;i<ps.length;i++){ ps[i].style.backgroundColor="#fff"; } }
How to get the sliding distance length of touch event
JS H5 C3 implements pop-up window
The above is the detailed content of Implementation method of pre-order, in-order and post-order traversal of JS binary tree. For more information, please follow other related articles on the PHP Chinese website!