<!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
相关分类