百度前端学院--斌斌学院--demo---7

最新推荐文章于 2024-09-06 22:20:29 发布

weixin_30778805

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量90

点赞数

文章标签：前端 javascript 数据结构与算法 ViewUI

原文链接：http://www.cnblogs.com/gaoxuerong123/p/7229257.html

版权

二叉树的三种遍历方法：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>
  6              
  7         </title>
  8         <style type="text/css">
  9             div{
 10                 border: 1px solid #3a9;
 11             }
 12             #a{
 13                 display: flex;
 14                 height: 600px;
 15             }
 16             #b1,#b2{
 17                 width: 600px;
 18                 display: flex;
 19                 height: 400px;
 20                 margin: 100px auto;
 21                 flex-direction: row;
 22             }
 23             #c1,#c2{
 24                 width: 200px;
 25                 display: flex;
 26                 height: 300px;
 27                 margin: 50px auto;
 28                 flex-direction: row;
 29             }
 30             #d1,#d2{
 31                 width: 80px;
 32                 display: flex;
 33                 height: 200px;
 34                 margin: 50px auto;
 35                 flex-direction: row;
 36             }
 37         </style>
 38     </head>
 39     <body>
 40         <div id="a">
 41             <div id="b1">
 42                 <div id="c1">
 43                     <div id="d1"></div>
 44                     <div id="d2"></div>
 45                 </div>
 46                 <div id="c2">
 47                     <div id="d1"></div>
 48                     <div id="d2"></div>
 49                 </div>                
 50             </div>
 51             
 52             <div id="b2">
 53                 <div id="c1">
 54                     <div id="d1"></div>
 55                     <div id="d2"></div>
 56                 </div>
 57                 <div id="c2">
 58                     <div id="d1"></div>
 59                     <div id="d2"></div>
 60                 </div>
 61             </div>
 62         </div>
 63         <button id="btn1">先序遍历</button>
 64         <button id="btn2">中序遍历</button>
 65         <button id="btn3">后序遍历</button>
 66         <script>
 67             var time=0;
 68             var root=document.getElementById("a");
 69             var btn1=document.getElementById("btn1");
 70             var btn2=document.getElementById("btn2");
 71             var btn3=document.getElementById("btn3");
 72             function show(point){
 73                 point.style.backgroundColor="#fff";
 74                 setTimeout(function(){
 75                     point.style.backgroundColor="red";
 76                 },time+=400);
 77                 setTimeout(function(){
 78                     point.style.backgroundColor="#fff";
 79                 },time+=400);
 80             }
 81             //先序遍历
 82             function first(root){
 83                 if(root){
 84                     show(root);
 85                     first(root.children[0]);
 86                     behind(root.children[1]);
 87                 }
 88                  
 89             }
 90             //中序遍历
 91             function middle(root){
 92                 if(root){
 93                     first(root.children[0]);
 94                     show(root);
 95                     behind(root.children[1]);
 96                 }
 97                  
 98             }
 99             //后序遍历
100             function behind(root){
101                 if(root){
102                     first(root.children[0]);
103                     behind(root.children[1]);
104                     show(root);
105                 }
106                  
107             }
108             //点击
109             btn1.onclick=function(){
110                 first(root);
111                 time=0;
112             }
113             btn2.onclick=function(){
114                 middle(root);
115                 time=0;
116             }
117             btn3.onclick=function(){
118                 behind(root);
119                 time=0; 
120             }
121         </script>
122     </body>
123 </html>

代码思路参考：https://github.com/ZweiLin/IFE/tree/master/JavaScript/Task7

转载于:https://www.cnblogs.com/gaoxuerong123/p/7229257.html

weixin_30778805

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度前端学院--斌斌学院--demo---7

二叉树的三种遍历方法： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 6 7 </title> ...
复制链接

扫一扫