<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>二叉樹(shù)二</title>
????<style>
????????*{
????????????margin:0;
????????????padding:0;
????????}
????????span{
????????????display:?inline-block;
????????????width:50px;
????????????height:50px;
????????????border:2px?solid?#000;
????????????text-align:?center;
????????????line-height:?50px;
????????}
????????.box-one{
????????????position:?relative;
????????????top:50px;
????????????left:600px;????/*問(wèn)題2：怎么通過(guò)計(jì)算來(lái)講CSS代替*/
?}
????????.box-two,.box-three,.box-four,.box-five{??/*問(wèn)題1：每一個(gè)子元素的外邊距差30*/
?position:?absolute;
????????????top:100px;
????????????left:50px;
????????}
????????.line{
????????????position:?absolute;
????????????border:1px?solid?#000;
????????????width:0;
????????}
????????.middle{
????????????height:40px;
????????????transform:translate(20px,1px);?/*平移*/
?}
????????.left{
????????????top:?-60px;
????????????left:?-125px;
????????????height:?250px;
????????????transform:?rotate(75deg);
????????}
????????.right{
????????????top:?-60px;
????????????left:175px;
????????????height:?250px;
????????????transform:?rotate(-75deg);
????????}
????????.wrap?{
????????????position:?relative;
????????????top:?500px;
????????????left:?600px;
????????}
????????.top,.topsearch{
????????????width:500px;
????????????height:50px;
????????????border:1px?solid?#000;
????????????text-align:?center;
????????????line-height:?50px;
????????}
????????.topsearch?input,.top?input{
????????????margin-left:5px;
????????}
????????.topsearch?button,.top?button{
????????????width:50px;
????????????cursor:?pointer;
????????}
????</style>
</head>
<body>
????<div?class="box-one"?id="box-one">
????????<span>第一層</span>
????????<p?class="line?left"></p>
????????<p?class="line?middle"></p>
????????<p?class="line?right"></p>
????????<div?class="box-two"?style="margin-left:-300px;">
????????????<span>第二層</span>
????????????<div?class="box-three"?style="margin-left:-150px;">
????????????????<span>第三層</span>
????????????????<div?class="box-four"?style="margin-left:-125px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four"?style="margin-left:-75px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four"?style="margin-left:-25px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four"?style="margin-left:25px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????</div>
????????????<div?class="box-three"?style="margin-left:-50px;">
????????????????<span>第三層</span>
????????????</div>
????????????<div?class="box-three"?style="margin-left:50px;">
????????????????<span>第三層</span>
????????????????<div?class="box-four"?style="margin-left:-50px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four">
????????????????????<span>第四層</span>
????????????????</div>
????????????</div>
????????</div>
????????<div?class="box-two"?style="margin-left:-50px;">
????????????<span>第二層</span>
????????</div>
????????<div?class="box-two"?style="margin-left:200px;">
????????????<span>第二層</span>
????????????<div?class="box-three"?style="margin-left:-150px;">
????????????????<span>第三層</span>
????????????????<div?class="box-four"?style="margin-left:-100px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four"?style="margin-left:-50px;">
????????????????????<span>第四層</span>
????????????????</div>
????????????????<div?class="box-four">
????????????????????<span>第四層</span>
????????????????</div>
????????????</div>
????????????<div?class="box-three"?style="margin-left:50px;">
????????????????<span>第三層</span>
????????????????<div?class="box-four"?style="margin-left:-50px;">
????????????????????<span>第四層</span>
????????????????????<div?class="box-five"?style="margin-left:-50px;">
????????????????????????<span>第五層</span>
????????????????????</div>
????????????????</div>
????????????????<div?class="box-four">
????????????????????<span>第四層</span>
????????????????</div>
????????????</div>
????????</div>
????</div>
????<!--排序-->
?<div?class="wrap">
????????<div?class="top">
????????????前序<input?type="radio"?name="top"?class="names"?value="qx">
????????????中序<input?type="radio"?name="top"?class="names"?value="zx">
????????????后序<input?type="radio"?name="top"?class="names"?value="hx">
????????????<button?type="button"?id="btn">遍歷</button>
????????</div>
????????<div?class="topsearch">
????????????前序<input?type="radio"?name="search"?class="names">
????????????中序<input?type="radio"?name="search"?class="names">
????????????后序<input?type="radio"?name="search"?class="names">
????????????<input?type="text">
????????????<button?type="button">搜索</button>
????????</div>
????</div>
</body>
<script?type="text/javascript"?src="task.js"></script>
<script?type="text/javascript"?src="animate.js"></script>
</html>JS：window.onload=function(){
????var?root=document.getElementById("box-one");
????var?time=0;
????var?flag=false;
//????1.通過(guò)時(shí)間和value值來(lái)判斷用哪個(gè)函數(shù)
????var?btn?=?document.getElementById("btn");
????btn.addEventListener("click",function(){
????????time?=0;
????????opt?=?getValue("top");
????????switch?(opt){
????????????case?'qx':
????????????????qx(root);
????????????????break;
????????????case?'zx':
????????????????zx(root);
????????????????break;
????????????case?'hx':
????????????????hx(root);
????????????????break;
????????}
????})
????//getValue得到value
????function?getValue(radioName){
????????var?obj?=?document.getElementsByName(radioName);
????????for(var?i=0;i<obj.length;i++){
????????????if(obj[i].checked){
????????????????return?obj[i].value;
????????????}
????????}
????????return?"undefined";
????}
};
var?timer
//每隔500MS變色
function?visit(root){
????timer?+=400;
????root.style.backgroundColor="#fff";
????setTimeout(function(){
????????root.style.backgroundColor="#0f0";
????},timer)
}
//3.前序、后序、中序
function?qx(root){
????if?(root)?{??//如果根元素村子
????????visit(root);??//執(zhí)行動(dòng)畫(huà)
????????var?children?=?root.getElementsByTagName('div');?//找到所有根元的子元素
????????for?(var?i?=?0;?i?<?children.length;?i++)?{??//循環(huán)
????????????//只選擇子一層div
????????????if(children[i].parentNode?==?root)?{???//將子元素等于根元素
????????????????qx(children[i]);??//那么就進(jìn)行添加
????????????}
????????}
????}
}
為什么我這個(gè)沒(méi)有動(dòng)畫(huà)效果，顏色一次渲染上去的
19990000
2017-09-23 22:14:45