<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task-2-23</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
text-align: center;
}
button {
border:0;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
padding: 5px;
margin:20px 5px;
cursor: pointer;
background-color: #fff;
}
button:active {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
div {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.default{
background-color: #fff;
color: black;
}
.active {
background-color: blue;
color: #fff;
}
.found {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<button>深度優先遍歷</button>
<button>廣度優先遍歷</button>
<input />
<button>深度優先搜索</button>
<button>廣度優先搜索</button>
<section>
<div id="root">
Super
<div>
Cat
<div>
Apple
<div>Pear</div>
<div>Pig</div>
<div>Cola</div>
<div>Soccer</div>
</div>
<div>Phone</div>
<div>
<div>Book</div>
<div>School</div>
</div>
</div>
<div>
Note
<div>
Human
<div>Code</div>
<div>Operate</div>
<div>Man</div>
</div>
<div>
Program
<div>
Bement
<div>Cat</div>
</div>
<div>Glass</div>
</div>
</div>
<div>Fish</div>
</div>
</section>
<script type="text/javascript">
var timer = null;
var oBtns = document.getElementsByTagName("button");
var rootNode = document.getElementById("root");
var lock = false;
var BFindex = 0;//廣度優先遍歷自增標識符
// 深度優先遍歷
//我們只需要一個棧空間，來壓棧就好了。因爲深度優先遍歷，遍歷了根節點後，就開始遍歷左子樹，所以右子樹肯定最後遍歷。我們利用棧的性質，先將右子樹壓棧，然後在對左子樹壓棧。此時，左子樹節點是在top上的，所以可以先去遍歷左子樹。
function traverseDF(node,nodeList){
if(node){
nodeList.push(node);
for(var i=0;i<node.children.length;i++){
traverseDF(node.children[i],nodeList);
}
}
}
//廣度優先遍歷
//對於廣度優先遍歷二叉樹，也就是按層次的去遍歷。依次遍歷根節點，然後是左孩子和右孩子。所以要遍歷完當前節點的所有孩子，這樣纔是層次遍歷嘛。根據左右孩子的順序來輸出，所以就是先進先出的原則，那麼我們當然就想到了隊列這個數據結構
function traverseBF(node, nodeList) {;
if (node) {
nodeList.push(node);
traverseBF(node.nextElementSibling, nodeList);//回傳 node的下一個元素對象
node = nodeList[BFindex++];
traverseBF(node.firstElementChild, nodeList);
}
}
//渲染動畫，有文本傳入則可執行搜索
function traverseRender(nodeList,foundText){
var i = 0;
var len = nodeList.length;
if (nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText) {
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
} else {
nodeList[i++].className = "active";
}
lock = true;
timer = setInterval(function(){
if(i<len){
nodeList[i-1].className = "";
if(nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText){
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
}
else{
nodeList[i++].className = "active";
}
}
else{
nodeList[i-1].className = "";
lock = false;
clearInterval(timer);
}
},1000);
}
function traverse(traverseIndex){
var Nodelist = [];
var foundList = [];
switch(traverseIndex){
case 0:traverseDF(rootNode,Nodelist);
break;
case 1:BFindex = 0;
traverseBF(rootNode,Nodelist);
break;
case 2:var foundText = document.getElementsByTagName("input")[0].value;
traverseDF(rootNode,Nodelist);
break;
case 3:BFindex = 0;
var foundText = document.getElementsByTagName("input")[0].value;
traverseBF(rootNode,Nodelist);
break;
}
resetBG();
setTimeout(traverseRender(Nodelist,foundText),500);
}
//綁定按鈕事件
function init(){
for(var i=0;i<oBtns.length;i++){
(function(i){
oBtns[i].onclick = function(){
if(lock === true){
alert("正在遍歷中!");
}
else{
traverse(i);
}
};
}(i));
}
}
// 重置所謂節點樣式
function resetBG(){
var nodeList = [];
traverseDF(rootNode,nodeList);
for(var i=0;i<nodeList.length;i++){
nodeList[i].className = "default";
}
}
init();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Task-2-23</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
text-align: center;
}
button {
border:0;
box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
padding: 5px;
margin:20px 5px;
cursor: pointer;
background-color: #fff;
}
button:active {
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
div {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.default{
background-color: #fff;
color: black;
}
.active {
background-color: blue;
color: #fff;
}
.found {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<button>深度優先遍歷</button>
<button>廣度優先遍歷</button>
<input />
<button>深度優先搜索</button>
<button>廣度優先搜索</button>
<section>
<div id="root">
Super
<div>
Cat
<div>
Apple
<div>Pear</div>
<div>Pig</div>
<div>Cola</div>
<div>Soccer</div>
</div>
<div>Phone</div>
<div>
<div>Book</div>
<div>School</div>
</div>
</div>
<div>
Note
<div>
Human
<div>Code</div>
<div>Operate</div>
<div>Man</div>
</div>
<div>
Program
<div>
Bement
<div>Cat</div>
</div>
<div>Glass</div>
</div>
</div>
<div>Fish</div>
</div>
</section>
<script type="text/javascript">
var timer = null;
var oBtns = document.getElementsByTagName("button");
var rootNode = document.getElementById("root");
var lock = false;
var BFindex = 0;//廣度優先遍歷自增標識符
// 深度優先遍歷
//我們只需要一個棧空間，來壓棧就好了。因爲深度優先遍歷，遍歷了根節點後，就開始遍歷左子樹，所以右子樹肯定最後遍歷。我們利用棧的性質，先將右子樹壓棧，然後在對左子樹壓棧。此時，左子樹節點是在top上的，所以可以先去遍歷左子樹。
function traverseDF(node,nodeList){
if(node){
nodeList.push(node);
for(var i=0;i<node.children.length;i++){
traverseDF(node.children[i],nodeList);
}
}
}
//廣度優先遍歷
//對於廣度優先遍歷二叉樹，也就是按層次的去遍歷。依次遍歷根節點，然後是左孩子和右孩子。所以要遍歷完當前節點的所有孩子，這樣纔是層次遍歷嘛。根據左右孩子的順序來輸出，所以就是先進先出的原則，那麼我們當然就想到了隊列這個數據結構
function traverseBF(node, nodeList) {;
if (node) {
nodeList.push(node);
traverseBF(node.nextElementSibling, nodeList);//回傳 node的下一個元素對象
node = nodeList[BFindex++];
traverseBF(node.firstElementChild, nodeList);
}
}
//渲染動畫，有文本傳入則可執行搜索
function traverseRender(nodeList,foundText){
var i = 0;
var len = nodeList.length;
if (nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText) {
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
} else {
nodeList[i++].className = "active";
}
lock = true;
timer = setInterval(function(){
if(i<len){
nodeList[i-1].className = "";
if(nodeList[i].firstChild.nodeValue.replace(/(^\s*)|(\s*$)/g, "") == foundText){
nodeList[i].className = "found";
lock = false;
clearInterval(timer);
}
else{
nodeList[i++].className = "active";
}
}
else{
nodeList[i-1].className = "";
lock = false;
clearInterval(timer);
}
},1000);
}
function traverse(traverseIndex){
var Nodelist = [];
var foundList = [];
switch(traverseIndex){
case 0:traverseDF(rootNode,Nodelist);
break;
case 1:BFindex = 0;
traverseBF(rootNode,Nodelist);
break;
case 2:var foundText = document.getElementsByTagName("input")[0].value;
traverseDF(rootNode,Nodelist);
break;
case 3:BFindex = 0;
var foundText = document.getElementsByTagName("input")[0].value;
traverseBF(rootNode,Nodelist);
break;
}
resetBG();
setTimeout(traverseRender(Nodelist,foundText),500);
}
//綁定按鈕事件
function init(){
for(var i=0;i<oBtns.length;i++){
(function(i){
oBtns[i].onclick = function(){
if(lock === true){
alert("正在遍歷中!");
}
else{
traverse(i);
}
};
}(i));
}
}
// 重置所謂節點樣式
function resetBG(){
var nodeList = [];
traverseDF(rootNode,nodeList);
for(var i=0;i<nodeList.length;i++){
nodeList[i].className = "default";
}
}
init();
</script>
</body>
</html>
