<!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>
