<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript和樹 1</title>
<link rel="stylesheet" type="text/css" href="css/task_2_22.css">
<style>
#wrapper {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 730px;
height: 240px; }
.layer_1 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 340px;
height: 200px; }
.layer_2 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 135px;
height: 160px; }
.layer_3 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 52.5px;
height: 120px; }
/*# sourceMappingURL=task_2_22.css.map */
</style>
</head>
<body>
<div id="wrapper">
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
</div>
<input type="button" id="preOrder" value="前序遍歷">
<input type="button" id="midOrder" value="中序遍歷">
<input type="button" id="postOrder" value="後序遍歷">
<a href="http://www.hhsapce.cn">點擊返回個人主頁</a>
<script type="text/javascript">
var result = [];//用於存放遍歷的dom節點
var timer = null;//定義動畫定時器
window.onload = function(){
var headNode = document.getElementById("wrapper");
//爲前序遍歷按鈕綁定事件
document.getElementById("preOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
preOrder(headNode);
startAnimate();
}
//爲中序遍歷按鈕綁定事件
document.getElementById("midOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
inOrder(headNode);
startAnimate();
}
//爲後序遍歷按鈕綁定事件
document.getElementById("postOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
postOrder(headNode);
startAnimate();
}
}
/*
*使用遞歸的方式前序遍歷DOM
* //遞歸方式，先序遍歷先訪問根節點，然後以同樣的方式訪問左子樹和右子樹
*/
function preOrder(node){
result.push(node);
if(node.firstElementChild !== null){
preOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
preOrder(node.lastElementChild);
}
}
/*
*使用遞歸的方式中序遍歷DOM
* 中序遍歷先訪問左子樹，再訪問根節點，最後訪問右子樹
*/
function inOrder(node){
if(node.firstElementChild !== null){
inOrder(node.firstElementChild);
}
result.push(node);
if(node.lastElementChild !== null){
inOrder(node.lastElementChild);
}
}
/*
*使用遞歸的方式後續遍歷DOM
* 後序遍歷先訪問左子樹，再訪問右子樹，最後訪問根節點
*/
function postOrder(node){
if(node.firstElementChild !== null){
postOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
postOrder(node.lastElementChild);
}
result.push(node);
}
//動畫開啓函數，每隔一秒
function startAnimate(){
var i = 0;
result[i].style.backgroundColor = 'blue';
timer = setInterval(function(){
i++;
if(i < result.length){
result[i-1].style.backgroundColor = '#fff';
result[i].style.backgroundColor = 'blue';
}else{
clearInterval(timer);
result[result.length-1].style.backgroundColor = '#fff';
}
}, 1000)
}
//樣式初始化函數
function styleReset(){
var divEles = document.getElementsByTagName("div");
for(var i=0; i<divEles.length;i++){
divEles[i].style.backgroundColor = '#fff';
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript和樹 1</title>
<link rel="stylesheet" type="text/css" href="css/task_2_22.css">
<style>
#wrapper {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 730px;
height: 240px; }
.layer_1 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 340px;
height: 200px; }
.layer_2 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 135px;
height: 160px; }
.layer_3 {
display: flex;
flex-direction: row;
padding: 15px 10px;
margin: 5px;
border: 1px solid #000;
background-color: #fff;
width: 52.5px;
height: 120px; }
/*# sourceMappingURL=task_2_22.css.map */
</style>
</head>
<body>
<div id="wrapper">
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
<div class="layer_1">
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
<div class="layer_2">
<div class="layer_3"></div>
<div class="layer_3"></div>
</div>
</div>
</div>
<input type="button" id="preOrder" value="前序遍歷">
<input type="button" id="midOrder" value="中序遍歷">
<input type="button" id="postOrder" value="後序遍歷">
<a href="http://www.hhsapce.cn">點擊返回個人主頁</a>
<script type="text/javascript">
var result = [];//用於存放遍歷的dom節點
var timer = null;//定義動畫定時器
window.onload = function(){
var headNode = document.getElementById("wrapper");
//爲前序遍歷按鈕綁定事件
document.getElementById("preOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
preOrder(headNode);
startAnimate();
}
//爲中序遍歷按鈕綁定事件
document.getElementById("midOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
inOrder(headNode);
startAnimate();
}
//爲後序遍歷按鈕綁定事件
document.getElementById("postOrder").onclick = function(){
//環境初始化
// styleReset();
// clearInterval(timer);
result = [];
postOrder(headNode);
startAnimate();
}
}
/*
*使用遞歸的方式前序遍歷DOM
* //遞歸方式，先序遍歷先訪問根節點，然後以同樣的方式訪問左子樹和右子樹
*/
function preOrder(node){
result.push(node);
if(node.firstElementChild !== null){
preOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
preOrder(node.lastElementChild);
}
}
/*
*使用遞歸的方式中序遍歷DOM
* 中序遍歷先訪問左子樹，再訪問根節點，最後訪問右子樹
*/
function inOrder(node){
if(node.firstElementChild !== null){
inOrder(node.firstElementChild);
}
result.push(node);
if(node.lastElementChild !== null){
inOrder(node.lastElementChild);
}
}
/*
*使用遞歸的方式後續遍歷DOM
* 後序遍歷先訪問左子樹，再訪問右子樹，最後訪問根節點
*/
function postOrder(node){
if(node.firstElementChild !== null){
postOrder(node.firstElementChild);
}
if(node.lastElementChild !== null){
postOrder(node.lastElementChild);
}
result.push(node);
}
//動畫開啓函數，每隔一秒
function startAnimate(){
var i = 0;
result[i].style.backgroundColor = 'blue';
timer = setInterval(function(){
i++;
if(i < result.length){
result[i-1].style.backgroundColor = '#fff';
result[i].style.backgroundColor = 'blue';
}else{
clearInterval(timer);
result[result.length-1].style.backgroundColor = '#fff';
}
}, 1000)
}
//樣式初始化函數
function styleReset(){
var divEles = document.getElementsByTagName("div");
for(var i=0; i<divEles.length;i++){
divEles[i].style.backgroundColor = '#fff';
}
}
</script>
</body>
</html>
