<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap,.box-one,.box-two,.box-three{
display: flex;
flex-direction: row;
justify-content:space-around;
align-items: center;
border:1px solid #000000;
}
.wrap{
width:398px;
height:98px;
}
.box-one{
width:45%;
height:80%;
}
.box-two{
width:45%;
height:80%;
}
.box-three{
width:40%;
height:80%;
}
/*前序*/
.btn{
float: left;
width:50px;
height:30px;
margin-top: 10px;
margin-left:10px;
line-height: 30px;
text-align: center;
border:1px solid #000000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap" id="wrap">
<div class="box-one">
<div class="box-two">
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
</div>
<div class="box-two">
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
</div>
</div>
<div class="box-one">
<div class="box-two">
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
</div>
<div class="box-two">
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
<div class="box-three">
<div class="box-four"></div>
<div class="box-four"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="btn" id="btnQ">前序</div>
<div class="btn" id="btnZ">中序</div>
<div class="btn" id="btnH">后序</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var wrap=document.getElementById("wrap");
var btnQ =document.getElementById("btnQ");
var btnZ=document.getElementById("btnZ");
var btnH=document.getElementById("btnH");
var timer =null;
//前序遍历
function preOrderTranverse(node,arr) { // btnOK(root,preOrderTranverse);
if(node !== null){
arr.push(node);
preOrderTranverse(node.firstElementChild,arr);
preOrderTranverse(node.lastElementChild,arr);
}
}
//中序遍历
function inOrderTranverse(node,arr) {
if(node !== null){
preOrderTranverse(node.firstElementChild,arr);
arr.push(node);
preOrderTranverse(node.lastElementChild,arr);
}
}
//后序遍历
function postOrderTranverse(node,arr) {
if(node !== null){
preOrderTranverse(node.firstElementChild,arr);
preOrderTranverse(node.lastElementChild,arr);
arr.push(node);
}
}
function init(){
btnQ.addEventListener("click",function(){
btnOk(wrap,inOrderTranverse);
});
btnZ.addEventListener("click",function(){
btnOk(wrap,inOrderTranverse);
});
btnH.addEventListener("click",function(){
btnOk(wrap,postOrderTranverse);
})
}
// 动画
function setAnimate(arr){
var i=0;
timer=setInterval(function(){
if(i>arr.length-1){ //如果大于数组长度 ，数组每次小于1的就变背景 然后清除清时期
arr[arr.length-1].style.backgroundColor="#fff";
clearInterval(timer);
}else{
if(i>0){
arr[i-1].style.backgroundColor="#fff"
}
arr[i].style.backgroundColor="#0f0";
}
i++;
console.log(i); //问题：为什么有的到了i的时候 背景不变色？
},500)
}
// 排序
function btnOk(wrap,fn){ //形参可以是方法，在函数内部调用
var arr=[];
clearInterval(timer);
fn(wrap,arr);
setAnimate(arr);
}
init();
}
</script>
</html>
1 回答
李晓健
TA贡献1036条经验 获得超461个赞
<!--你这里的box-four的宽度和高度是0，所以加了背景色你也看不到，因为它们不占空间，你可以像下面这样在里面加点内容--> <div class="box-two"> <div class="box-three"> <div class="box-four">1</div> <div class="box-four">2</div> </div> <div class="box-three"> <div class="box-four">1</div> <div class="box-four">2</div> </div> </div>
//这你这里给的背景色是白色 页面背景本来就是白色的，也可看不到，你可以像下面这样，改成红色
if(i>arr.length-1){ //如果大于数组长度 ，数组每次小于1的就变背景 然后清除清时期
arr[arr.length-1].style.backgroundColor="#f00";
clearInterval(timer);
}添加回答
举报
0/150
提交
取消