依赖 工具函数库
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#box{
position: relative;
width: 500px;
padding: 10px;
background: #eee;
}
#btnbox{
position: absolute;
right: -60px;
top: 0;
width: 50px;
line-height: 25px;
background: #666666;
color: #fff; }
#btnbox li,#btnbox span{
display: block;
height: 25px;
padding: 5px;
}
#btnbox li:hover,#btnbox span:hover{
background: #0000FF;
cursor: pointer;
}
#btnbox ul{
display: none;
}
#dialog{
position: absolute;
left: 50%;
top: 50%;
width: 460px;
height: 260px;
padding: 20px;
margin-left: -255px;
margin-top: -155px;
background: #CCEEDD;
border: 5px solid #0000FF;
}
#dialog button{
position: absolute;
right: 5px;
top: 5px;
width: 20px;
height: 20px;
cursor: pointer;
}
#dialog .dialog-tt ul{
border-bottom: 2px solid #0000FF; }
#dialog .dialog-tt li{
float: left;
padding: 5px 10px;
cursor: pointer; }
#dialog .dialog-tt li.active{
background: #0000FF;
color: #fff;
}
#dialog .dialog-bd{
padding: 10px;
}
.f-cb{
zoom: 1;
}
.f-cb:after{
content: '';
display: block;
clear: both;
}
.f-dn{
display: none;
}
.f-db{
display: block;
}
</style>
<script src="hl_tool.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var oBox = hGetId('box');
var oDialog = hGetId('dialog');
var oBtnbox = hGetId('btnbox');
var oBtnboxUl = hGetTagName('ul',btnbox)[0];
var aBtnboxLi = hGetTagName('li',oBtnboxUl);
var oClose = hGetTagName('button',oDialog)[0];
var oBtnSeah = hGetId('btn-seah');
var oIptSeah = hGetId('ipt-seah');
var oBtnReplace = hGetId('btn-replace');
var oIpt1Replace = hGetId('ipt1-replace');
var oIpt2Replace = hGetId('ipt2-replace');
var onOff = true;
var sCon = hGetId('con').innerHTML;
var aDialogTtLi = hGetTagName('li', hGetTagName('div',oDialog)[0]);
var aDialogBdDiv = hGetTagName('div',hGetId('dialog-bd'));; hGetTagName('span',btnbox)[0].onclick = function(){ if(onOff){
hShow(oBtnboxUl);
}else{
hHide(oBtnboxUl);
}
onOff = !onOff;
} function fnTab(_this,index){
for (var i = 0; i < aDialogTtLi.length; i++) {
aDialogTtLi[i].className = '';
hHide(aDialogBdDiv[i]);
}
hGetId('con').innerHTML = sCon;
_this.className = 'active';
hShow(aDialogBdDiv[index]);
} aBtnboxLi[0].onclick = function(){
hShow(oDialog);
fnTab(aDialogTtLi[0],0);
}
aBtnboxLi[1].onclick = function(){
hShow(oDialog);
fnTab(aDialogTtLi[1],1);
}
oClose.onclick = function(){
hHide(oDialog);
} for (var i = 0; i < aDialogTtLi.length; i++) { aDialogTtLi[i].index = i; aDialogTtLi[i].onclick = function(){
fnTab(this,this.index);
}
} oBtnSeah.onclick = function(){
if(oIptSeah.value == ''){
alert('请输入要查找的内容');
hGetId('con').innerHTML = sCon;
}else{
var ohReplace = hReplace(sCon , oIptSeah.value);
if(ohReplace.flag === false){
alert('找不到字符:=》'+ oIptSeah.value);
hGetId('con').innerHTML = sCon;
}else{
hGetId('con').innerHTML = ohReplace.newStr;
oIptSeah.value = '';
}
}
} oBtnReplace.onclick = function(){
var str = hGetId('con').innerHTML;
if(oIpt1Replace.value == ''){
alert('请输入要替换的内容');
}else{
var ohReplace = hReplace(str , oIpt1Replace.value , oIpt2Replace.value, 1);
if(ohReplace.flag === false){
alert('找不到字符:=》'+ oIpt1Replace.value);
hGetId('con').innerHTML = str;
oIpt1Replace.value = oIpt2Replace.value = '';
}else{
if(oIpt2Replace.value == ''){
if (confirm("确定删除" + oIpt1Replace.value) ==true){
hGetId('con').innerHTML = ohReplace.newStr;
oIpt1Replace.value = oIpt2Replace.value = '';
}else{
oIpt1Replace.value = oIpt2Replace.value = '';
return false;
}
}else{
hGetId('con').innerHTML = ohReplace.newStr;
oIpt1Replace.value = oIpt2Replace.value = '';
}
}
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="con">
妙味课堂是一支充满温馨并且极富人情味的IT培训团队；
2010～2011年，我们深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的 JavaScript 课程，
2011～2013年，我们精准研发出最新HTML5&CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中，
希望尽最大努力，将一种快乐愉悦的授课体验传递给我们的每一位学员。
在未来几年内，妙味课堂会逐渐发展成由上百位优秀讲师所带领的创业培训团队，
这些优秀讲师将是每个培训区域的独立负责人，他们是妙味课堂未来发展道路中最强大的力量。
</div>
<div id="btnbox">
<span>展开</span>
<ul >
<li>查找</li>
<li>替换</li>
</ul>
</div>
</div>
<div id="dialog" class="f-dn">
<button>X</button>
<div class="dialog-tt">
<ul class="f-cb">
<li class="active">查找</li>
<li>替换</li>
</ul>
</div>
<div id="dialog-bd" class="dialog-bd">
<div>
<input type="text" name="" id="ipt-seah" value="" />
<input type="button" name="" id="btn-seah" value="查找" />
</div>
<div class="f-dn">
<input type="text" name="" id="ipt1-replace" value="" />
<input type="text" name="" id="ipt2-replace" value="" />
<input type="button" name="" id="btn-replace" value="替换" />
</div>
</div>
</div>
</body>
</html>