DOM树的动画形式遍历 //百度任务task22

来源：互联网发布：生活在英国知乎编辑：程序博客网时间：2024/06/10 23:10

<!doctype html>        <html><head>    <title>task 22- javascript和树</title>    <meta charset="utf-8">    <style>.wrap{    padding:10px;    display:flex;    width:1000px;    height:400px;    border:1px solid black;    flex-flow:row wrap;    justify-content:space-around;    align-items:center;}        .first,.second,.third{           display:flex;            border:1px solid sandybrown;            padding:10px;            justify-content:space-around;            align-items:center;        }        .first{            width:450px;            height:350px;        }        .second{            width:200px;            height:300px;        }        .third{            width:50px;            height:250px;        }        form{            margin-left:450px;            margin-bottom:10px;            width:150px;        }    </style></head><body><form><select id="place">    <option value="front" id="front">前</option>    <option value="middle" id="middle">中</option>    <option value="back" id="back">后</option></select>    <button type="button" id="start" value="开始遍历">开始遍历</button></form><div class="wrap">    <div class="first">        <div class="second">            <div class="third"></div>            <div class="third"></div>        </div>        <div class="second">            <div class="third"></div>            <div class="third"></div>        </div>    </div>    <div class="first">        <div class="second">            <div class="third"></div>            <div class="third"></div>        </div>        <div class="second">            <div class="third"></div>            <div class="third"></div>        </div>    </div></div><script type="text/javascript" src="task22.js"></script></body></html>

<span style="background-color: rgb(255, 255, 51);">// JAVASCRIPT</span>

<span style="background-color: rgb(255, 255, 51);"></span><pre name="code" class="javascript">window.onload=function(){    var div=document.getElementsByTagName("div")[0];    var btn=document.getElementById("start");    var select=document.getElementById("place");    var divList=[];    var change=null;    btn.addEventListener("click",function(event){        event.preventDefault();        switch(select.selectedIndex){            case 0: {resetA();front(div);changeColor();break;}            case 1:{resetA();middle(div);changeColor();break;}            case 2:{resetA();backR(div);changeColor();break;}        }    });   function front(node){       if(node!=null){           divList.push(node);           front(node.firstElementChild);           front(node.lastElementChild);       }   }    function middle(node){        if(node!=null){            middle(node.firstElementChild);            divList.push(node);            middle(node.lastElementChild)        }    }    function backR(node){        if(node!=null){            backR(node.firstElementChild);            backR(node.lastElementChild);            divList.push(node);        }    }    function changeColor(){        var i=0;        divList[i].style.backgroundColor="yellow";         change=setInterval(function(){            i++;            if(i<divList.length){                divList[i-1].style.backgroundColor="white";                divList[i].style.backgroundColor="yellow";            }else{                clearInterval(change);                divList[divList.length-1].style.backgroundColor="white";            }            }          ,500)    }    function resetA(){        divList=[];        clearInterval(change);

<span style="background-color: rgb(255, 255, 51);">//忽略了如果在遍历期间重新选择遍历方向时，对颜色的清除：</span>

var Div=document.getElementsByTagName("div");        var len=Div.length;        for(var i=0;i<len;i++){            Div[i].style.backgroundColor="white"        }    }};

0 0