0、题目
- 基于任务22，参考示例图，将二叉树变成了多叉树，并且每一个节点中带有内容
- 提供一个按钮，显示开始遍历，点击后，以动画的形式呈现遍历的过程
- 当前被遍历到的节点做一个特殊显示（比如不同的颜色）
- 每隔一段时间（500ms，1s等时间自定）再遍历下一个节点
- 增加一个输入框及一个“查询”按钮，点击按钮时，开始在树中以动画形式查找节点内容和输入框中内容一致的节点，找到后以特殊样式显示该节点，找不到的话给出找不到的提示。查询过程中的展示过程和遍历过程保持一致
1、解题过程
task23.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE JavaScript Task 22</title>
<style>
div{
display: inline-block;
border:1px solid black;
box-sizing: border-box;
}
.one{
height:140px;
padding:10px;
}
.two{
height:120px;
padding:10px;
}
.three{
height:100px;
padding:10px;
}
.four{
height:80px;
padding:10px;
}
.five{
width:60px;
height:60px;
}
button{
margin:50px;
height:30px;
width:50px;
}
</style>
</head>
<body>
<div id="super" class="one">
Super
<div class="two">
Car
<div class="three">
Apple
<div class="four">Poor</div>
<div class="four">Pig</div>
<div class="four">Cola</div>
<div class="four">Soccer</div>
</div>
<div class="three">
Phone
</div>
<div class="three">
<div class="four">Book</div>
<div class="four">School</div>
</div>
</div>
<div class="two">
Note
<div class="three">
Human
<div class="four">Code</div>
<div class="four">Operate</div>
<div class="four">Mon</div>
</div>
<div class="three">
Progrom
<div class="four">
Bement
<div class="five">Cat</div>
</div>
<div class="four">Glass</div>
</div>
</div>
<div class="two">Fish</div>
</div>
<button id="button">遍历</button>
<input type="text" id="input">
<button id="check">查询</button>
<script type="text/javascript" src="task23.js"></script>
</body>
</html>
task23.js
var tree=document.getElementById("super"),
list=[],
a=undefined,
timer=null,
check=document.getElementById("check");
//先序遍历
function preOrder(node){
if(node!=null){
list.push(node);
var length=node.children.length;
if(length>0){
for(var i=0;i<length;i++){
if(node.children[i].nodeType==1){
preOrder(node.children[i]);
}
}
}
}
}
//依次改变数组list中的元素背景颜色
function show(a){
var input=document.getElementById(‘input‘).value;
i = 0;
list[i].style.backgroundColor=‘blue‘;
timer = setInterval(function () {
i++;
if (i < list.length) {
var content=list[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") ;
if(input==content&&content){
clearInterval(timer);
list[i].style.backgroundColor="red";
list[i-1].style.backgroundColor="#fff";
}
else{
list[i-1].style.backgroundColor = ‘#fff‘;
list[i].style.backgroundColor = ‘blue‘;
}
}
else {
clearInterval(timer);
list[list.length-1].style.backgroundColor = ‘#fff‘;
if(a==1) alert("未找到输入的值！");
}
},500);
}
document.getElementById("button").addEventListener("click",function(){
origin();
preOrder(tree);
show(0);
});
//查询函数
function test(node){
if(node!=null){
list.push(node);
var length=node.children.length;
if(length>0){
for(var i=0;i<length;i++){
if(node.children[i].nodeType==1){
preOrder(node.children[i]);
}
}
}
}
}
check.onclick=function(){
origin();
test(tree);
show(1);
}
//初始状态
function origin(){
list=[];
clearInterval(timer);
var divs=document.getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].style.backgroundColor="#fff";
}
}
2、遇到的问题
时间： 2024-10-22 14:53:44