为什么我这个没有动画效果，颜色一次渲染上去的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二叉树二</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; /*问题2：怎么通过计算来讲CSS代替*/
}
.box-two,.box-three,.box-four,.box-five{ /*问题1：每一个子元素的外边距差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.通过时间和value值来判断用哪个函数
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); //执行动画
var children = root.getElementsByTagName('div'); //找到所有根元的子元素
for (var i = 0; i < children.length; i++) { //循环
//只选择子一层div
if(children[i].parentNode == root) { //将子元素等于根元素
qx(children[i]); //那么就进行添加
}
}
}
}
19990000浏览 1310回答 1
1回答
随时随地看视频慕课网APP
相关分类
JavaScript