<!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);
????}
}
背景色不會變綠后不會消失？
19990000
2017-09-29 23:32:02
