<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style>
p,ul,li{margin:0;padding:0;}
li{list-style:none;}
#mainConent{position:relative;top:0;left:0;}
#mainConent p{width:400px;height:200px;border:10px solid #CCCCCC;background:#fff;}
#mainConent ul{width:70px;position:absolute;top:0;left:430px;}
#mainConent li{background:#ccc;margin-top:1px;text-align:center;color:#fff;}
#mainConent li#active{background:#999999;}
.default{display:none;}
.showDefault{display:block;}
#expainDiv{width:400px;height:100px;border:10px solid #FF33CC; position:relative;top:10px;left:0; display:none;}
#expainDiv span{position:absolute;top:0;right:6px;font-size:24px;}
#expainDiv ul{position:absolute;top:15px;left:10px;width:350px;height:20px;border-bottom:1px solid #FF0000;}
#expainDiv li{position:absolute;width:50px;height:20px;text-align:center;}
#find{left:10px;}
#replace{left:61px;}
#findDiv,#replaceDiv{position:absolute;left:10px;top:50px;}
#findText,#replaceSrcText,#replaceDesText{border:1px solid #FF6600;}
#textBg{background:#FFFF00;}
</style>
<script>
window.onload = function(){
var mainLi = document.getElementById('mainConent').getElementsByTagName('li');
var expainDiv = document.getElementById('expainDiv');
var findLi = document.getElementById('find');
var replaceLi = document.getElementById('replace');
var findText = document.getElementById('findText');
var findInput = document.getElementById('findDiv').getElementsByTagName('input');
var contentP = document.getElementsByTagName('p')[0];
var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');
var deleteSpan = document.getElementById('expainDiv').getElementsByTagName('span')[0];
var onOff = true;
mainLi[0].onclick = function(){
if(onOff){
mainLi[1].className = 'showDefault'; /* 直接用class替換*/
mainLi[2].className = 'showDefault';
mainLi[0].innerHTML = '閉合';
}else{
mainLi[1].className = 'default';
mainLi[2].className = 'default';
mainLi[0].innerHTML = '展開';
expainDiv.style.display = 'none';
}
onOff = !onOff;
};
mainLi[1].onOff = 1;
mainLi[2].onOff = 2;
mainLi[1].onclick = mainLiFun;
mainLi[2].onclick = mainLiFun;
findLi.onOff = 1;
replaceLi.onOff = 2;
findLi.onclick = mainLiFun;
replaceLi.onclick = mainLiFun;
/*右上角的刪除x*/
deleteSpan.onclick = function(){
expainDiv.style.display = 'none';
};
/*查找*/
findInput[1].onclick =function(){
var strfind = findInput[0].value;
var contentStr = contentP.innerHTML;
if(!strfind){
alert("請輸入查找的字符串！");
return;
}else if(contentStr.indexOf(strfind) == -1){
alert("輸入的信息找不到！");
return;
}
contentP.innerHTML = contentStr.split(strfind).join('<span id="textBg">'+strfind+'</span>');
};
/*替換*/
replaceInput[2].onclick = function(){
var replaceSrc = replaceInput[0].value;
var replaceDes = replaceInput[1].value;
var contentStr = contentP.innerHTML;
if(!replaceSrc){
alert("請輸入要被替換的文字！");
return;
}else if(contentStr.indexOf(replaceSrc) == -1){
alert("輸入有誤，找不到 "+replaceSrc+" !");
return;
}else if(!replaceDes){
if(!confirm("確定刪除字符串 "+replaceSrc+" 嗎？")) return;
}
contentP.innerHTML = contentStr.split(replaceSrc).join('<span id="textBg">'+replaceDes+'</span>');
};
};
function mainLiFun(){
var findLi = document.getElementById('find');
var replaceLi = document.getElementById('replace');
var findDiv = document.getElementById('findDiv');
var replaceDiv = document.getElementById('replaceDiv');
var findInput = document.getElementById('findDiv').getElementsByTagName('input');
var replaceInput = document.getElementById('replaceDiv').getElementsByTagName('input');
if(this.onOff ==1){
hiddenExpainDivLiFun(replaceLi);
expainDivLiFun(findLi);
replaceDiv.style.display = 'none';
findDiv.style.display = 'block';
findInput[0].value = "";
}else if(this.onOff ==2){
hiddenExpainDivLiFun(findLi);
expainDivLiFun(replaceLi);
findDiv.style.display = 'none';
replaceDiv.style.display = 'block';
replaceInput[0].value = "";
replaceInput[1].value = "";
}
}
function expainDivLiFun(id){
expainDiv.style.display = 'block';
findDiv.style.display = 'block';
id.style.background = '#FF0000';
id.style.color = '#fff';
}
function hiddenExpainDivLiFun(id){
expainDiv.style.display = 'block';
findDiv.style.display = 'block';
id.style.background = '';
id.style.color = '#000';
}
</script>
</head>
<body>
<div id="mainConent">
<p>總有些回憶，在心中築牆成堡，而久久幽居於內的那個人，也會因一陣風的溫柔、一朵雲的美好、一抹夕陽的嬌羞，漸漸地，在腦海裏浮現。
那時的青春，從未被時光所辜負，一把吉他，在鄉野之間，迴盪着歡樂的曲調，樹蔭下，蝴蝶飛舞，芬芳四溢，一個妙字，橫生幾漾微笑，點綴在容顏之上，也成爲了最巧合的裝扮。
我們也常常在日暮時分，尋一處村落之外的土丘，鋪上薄薄的外套，躺下來，靜靜的聆聽，那片染紅的餘暉，一點、一點的走向黃昏的盡頭。
也隨綠葉一起鼓掌，愜意的，歡迎着璀璨的星光，將夜空點亮，任由月色，在人間綻滿柔白的清涼，給心靈，送上一襲快爽。
鳥兒漸息，蟬鳴依舊，淡淡的雲，安靜的風，彷彿都在這個夏夜，給了未來一個憧憬。
多少個日夜，雋刻了濃情的誓言;多少個夢裏，你睡着在我的肩頭，還喚起了我的名;又有多少次曾想過，可不可以就這樣，從此情牽一線到白頭……
年華，在生命的長河中，悄悄地流走，而在現實的磨礪中，歲月，最終沒有賦予那段至純的愛情一個永恆。
後來，我們於千萬人之中遇見，卻又在茫茫天地間走散，只是那份甜甜的依戀、那彎醉人的深眸，那念點落在過往中，最誠摯的守護，早已在心田深種，也在餘生的旅途中，開滿思念的味道，思念着，回憶裏的那個人。
</p>
<ul>
<li id="active">展開</li>
<li class ="default">查找</li>
<li class="default">替換</li>
</ul>
</div>
<div id="expainDiv">
<span>x</span>
<ul>
<li id="find">查找</li>
<li id="replace">替換</li>
</ul>
<div id="findDiv">
<input type="text" id="findText" />
<input type="button" value="查找"/>
</div>
<div id="replaceDiv">
<input type="text" id="replaceSrcText" />
<input type="text" id="replaceDesText" />
<input type="button" value="替換"/>
</div>
</div>
</body>
</html>
