<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>task</title> <style> .box{ display: flex; justify-content: space-around; align-items: center; border:2px solid #000; } .box-one{ width:100%; height:196px; } .box-two,.box-three,.box-four{ height:80%; margin:5px; } .wrap{ position: relative; top:15px; left:50px; } .look,.search,.fun{ float: left; margin-left:20px; } </style> </head> <body> <div class="box-one box" id="box-one"> <span>1</span> <div class="box-two box"> <span>1-1</span> <div class="box-three box"> <span>1-1-1</span> <div class="box-four box"> <span>1-1-1-1</span> </div> <div class="box-four box"> <span>1-1-1-2</span> </div> <div class="box-four box"> <span>1-1-1-3</span> </div> </div> <div class="box-three box"> <span>1-1-2</span> <div class="box-four box"> <span>1-1-2-1</span> </div> <div class="box-four box"> <span>1-1-2-2</span> </div> <div class="box-four box"> <span>1-1-2-3</span> </div> </div> <div class="box-three box"> <span>1-1-3</span> <div class="box-four box"> <span>1-1-3-1</span> </div> <div class="box-four box"> <span>1-1-3-2</span> </div> <div class="box-four box"> <span>1-1-3-3</span> </div> </div> </div> <div class="box-two box"> <span>1-2</span> <div class="box-three box"> <span>1-2-1</span> <div class="box-four box"> <span>1-2-1-1</span> </div> <div class="box-four box"> <span>1-2-1-2</span> </div> <div class="box-four box"> <span>1-2-1-3</span> </div> </div> <div class="box-three box"> <span>1-2-2</span> <div class="box-four box"> <span>1-2-2-1</span> </div> <div class="box-four box"> <span>1-2-2-2</span> </div> <div class="box-four box"> <span>1-2-2-3</span> </div> </div> <div class="box-three box"> <span>1-2-3</span> <div class="box-four box"> <span>1-2-3-1</span> </div> <div class="box-four box"> <span>1-2-3-2</span> </div> <div class="box-four box"> <span>1-2-3-3</span> </div> </div> </div> </div> <!--控制--> <div class="wrap"> <div class="look"> 前序<input type="checkbox" class="top" name="top" value="qx"> 后序<input type="checkbox" class="top" name="top" value="hx"> <button type="button" id="look-btn">遍历</button> </div> <div class="search"> <input type="text" class="search-text"> <button type="button" class="search-btn">查找</button> </div> <div class="fun"> <button type="button" id="add">添加</button> <button type="button" id="del">删除</button> </div> </div> </body> <script type="text/javascript" src="main.js"></script> <script type="text/javascript" src="animate.js"></script> </html>
var time=0; var flag=false; var lookBtn = document.getElementById("look-btn"); var root= document.getElementById("box-one"); lookBtn.addEventListener("click",function(){ //通过name得到value值 // 通过switch循环一下 time=0; opt = getValue("top"); switch(opt){ case 'qx': qx(root); break; case 'hx': hx(root); break; } }); //通过name得到value值 function getValue(name){ var getName=document.getElementsByName(name); for(var i=0;i<getName.length;i++) { if (getName[i].checked){ return getName[i].value; } } return "undefined"; } function visit(node){ time +=400; node.style.backgroundColor = "#fff"; setTimeout(function(){ node.style.backgroundColor ="#0f0"; },time); } //前序 function qx(root){ if(root){ visit(root); var children = root.getElementsByTagName("div"); for(var i=0;i<children.length;i++){ if(children[i].parentNode ==root){ qx(children[i]); } } } } //后序 function hx(root){ if(root){ var children = root.getElementsByTagName("div"); for(var i=0;i<children.length;i++){ if(children[i].parentNode ==root){ hx(children[i]); } } visit(root); } }
Gotta
AllySu
相关分类