<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{
background:#EFEFE7;
}
p{
background:#fff;
width:600px;
padding:50px;
font-family:"微软雅黑";
font-size:22px;
line-height:36px;}
#wrap{
width:800px;
margin:50px auto;
position:relative;
}
#button{
width:100px;
position:absolute;
right:0px;
top:0px;
}
#button a{
color:#fff;
height:40px;
width:100px;
line-height:40px;
text-align:center;
margin-top:5px;
display:none;
background:#C0C0C0;
font-weight:bold;
font-size:20px;
font-family:"微软雅黑";
text-decoration:none;
}
#button a:hover {
background: #E76308;
}
#button a:first-child{
background:#94948C;
display:block;
}
#close{
font-size:24px;
position:absolute;
right:10px;
cursor:pointer;
}
#toolbox .active{
background:#E73100;
color:#fff;
}
#toolbox span{
font-family:"微软雅黑";
font-size:20px;
padding:5px 20px;
cursor:pointer;
}
#search,#replace{
border-top:3px solid #F7634A;
margin-top:3px;
display:none;
}
#toolbox{
border:10px solid #E71063;
width:640px;
padding:20px;
background:#E7E7B5;
position:relative;
display:none;
}
#search input[type="text"], #replace input[type="text"] {
margin: 20px 10px 20px 0px;
padding: 2px;
height: 24px;
width: 200px;
font-size: 24px;
}
#search input[type="button"], #replace input[type="button"] {
margin: 20px 0px;
height: 30px;
width: 56px;
font-size: 20px;
}
#close {
font-size: 24px;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var odiv = document.getElementById('button');
var obtn = odiv.getElementsByTagName('a')[0];
var obtn1 =odiv.getElementsByTagName('a')[1];
var obtn2 =odiv.getElementsByTagName('a')[2];
var onff = 1;
var otool = document.getElementById('toolbox');
var ospan = otool.getElementsByTagName('span');
var osearch = document.getElementById('search');
var oreplace = document.getElementById('replace');
var oclose = document.getElementById('close');
var oinputs= osearch.getElementsByTagName('input')[0];
var oinputs1= osearch.getElementsByTagName('input')[1];
var oinputr = oreplace.getElementsByTagName('input');
var str ='';
var op = document.getElementsByTagName('p')[0];
obtn.onclick = function ()
{
if(onff)
{
obtn.innerHTML = '收起'
obtn1.style.display = 'block';
obtn2.style.display = 'block';
}
else
{
obtn.innerHTML = '展开'
obtn1.style.display = 'none';
obtn2.style.display = 'none';
}
onff = !onff;
};
obtn1.onclick = ospan[0].onclick = function ()
{
otool.style.display = 'block';
ospan[1].className = '';
ospan[0].className = 'active';
osearch.style.display = 'block';
oreplace.style.display = 'none';
}
obtn2.onclick = ospan[1].onclick = function ()
{
otool.style.display = 'block';
ospan[0].className = '';
ospan[1].className = 'active';
osearch.style.display = 'none';
oreplace.style.display = 'block';
}
oclose.onclick = function ()
{
otool.style.display = 'none';
}
oinputs1.onclick = function ()
{
str = oinputs.value;
if(str == '')
{
alert('请输入内容！');
}
else if( op.innerHTML.indexOf(str) == -1 )
{
alert('没有找到需要查找的内容');
}
else
{
op.innerHTML = op.innerHTML.split(str).join('<span style="background:yellow">'+str+'</span>');
}
};
oinputr[2].onclick = function ()
{
str = oinputr[0].value;
str1 = oinputr[1].value;
if( str == '' )
{
alert('请输入内容！')
}
else if(op.innerHTML.indexOf(str) == -1 )
{
alert('查找不到内容！');
}
else
{
if(str1 == '')
{
alert('您确定要删除内容吗');
}
op.innerHTML = op.innerHTML.split(str).join('<span style="background:yellow">'+str1+'</span>');
}
}
};
</script>
</head>
<body>
<div id="wrap">
<p>恋爱和结婚这件事，更多的不是我们遇到了对的人，而是我们准备好了，遇到对的人。天时地利人和缺一不可，首先我们准备好了，其次我们在对的时间遇到对的人。而我们准备好了，是个主要矛盾，是我们能解决也是最应该先解决的一个问题。我们只有解决了这个主要矛盾，才能让其他次要矛盾被顺理成章的解决。我们自己的态度是最重要的，只有当我们学会爱了，一个对的人走过来，我们才能机会开展一段美好的感情。有句话是如果你想要一个美好的人，就先让自己美好，当你具备了一种爱的能力，并抱着爱的态度去面对别人的时候，你很容易被持有相同态度的人接受，开始阳光灿烂的未来。</p>
<div id="button">
<a href="javascript:">展开</a>
<a href="javascript:">查找</a>
<a href="javascript:">替换</a>
</div>
<div id="toolbox">
<div id="close">×</div>
<span class="active">查找</span>
<span>替换</span>
<div id="search">
<input type="text">
<input type="button" value="查找">
</div>
<div id="replace">
<input type="text">
<input type="text">
<input type="button" value="替换">
</div>
</div>
</div>
</body>
</html>
