<!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);
????????????})
????????}
//????????動(dòng)畫
?function?setAnimate(arr){
????????????var?i=0;
????????????timer=setInterval(function(){
????????????????if(i>arr.length-1){??//如果大于數(shù)組長(zhǎng)度??，數(shù)組每次小于1的就變背景?然后清除清時(shí)期
?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的時(shí)候?背景不變色？
????????????},500)
????????}
????//????????排序
?function?btnOk(wrap,fn){??//形參可以是方法，在函數(shù)內(nèi)部調(diào)用
?var?arr=[];
????????clearInterval(timer);
????????fn(wrap,arr);
????????setAnimate(arr);
????}
????????init();
????}
</script>
</html>
問下我的這個(gè)有的背景為什么顯示不出來(lái)
19990000
2017-09-19 22:47:13
