<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> body{ background:#EFEFE7; } p{ background:#fff; 600px; padding:50px; font-family:"微软雅黑"; font-size:22px; line-height:36px;} #wrap{ 800px; margin:50px auto; position:relative; } #button{ 100px; position:absolute; right:0px; top:0px; } #button a{ color:#fff; height:40px; 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; 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; 200px; font-size: 24px; } #search input[type="button"], #replace input[type="button"] { margin: 20px 0px; height: 30px; 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>