依赖 工具函数库
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 li{ 12 list-style: none; 13 } 14 #box{ 15 position: relative; 16 500px; 17 padding: 10px; 18 background: #eee; 19 } 20 #btnbox{ 21 position: absolute; 22 right: -60px; 23 top: 0; 24 50px; 25 line-height: 25px; 26 background: #666666; 27 color: #fff; 28 29 } 30 #btnbox li,#btnbox span{ 31 display: block; 32 height: 25px; 33 padding: 5px; 34 } 35 #btnbox li:hover,#btnbox span:hover{ 36 background: #0000FF; 37 cursor: pointer; 38 } 39 #btnbox ul{ 40 display: none; 41 } 42 #dialog{ 43 position: absolute; 44 left: 50%; 45 top: 50%; 46 460px; 47 height: 260px; 48 padding: 20px; 49 margin-left: -255px; 50 margin-top: -155px; 51 background: #CCEEDD; 52 border: 5px solid #0000FF; 53 } 54 #dialog button{ 55 position: absolute; 56 right: 5px; 57 top: 5px; 58 20px; 59 height: 20px; 60 cursor: pointer; 61 } 62 #dialog .dialog-tt ul{ 63 border-bottom: 2px solid #0000FF; 64 65 } 66 #dialog .dialog-tt li{ 67 float: left; 68 padding: 5px 10px; 69 cursor: pointer; 70 71 } 72 #dialog .dialog-tt li.active{ 73 background: #0000FF; 74 color: #fff; 75 } 76 #dialog .dialog-bd{ 77 padding: 10px; 78 } 79 .f-cb{ 80 zoom: 1; 81 } 82 .f-cb:after{ 83 content: ''; 84 display: block; 85 clear: both; 86 } 87 .f-dn{ 88 display: none; 89 } 90 .f-db{ 91 display: block; 92 } 93 </style> 94 <script src="hl_tool.js" type="text/javascript" charset="utf-8"></script> 95 <script type="text/javascript"> 96 window.onload = function(){ 97 var oBox = hGetId('box'); 98 var oDialog = hGetId('dialog'); 99 var oBtnbox = hGetId('btnbox'); 100 var oBtnboxUl = hGetTagName('ul',btnbox)[0]; 101 var aBtnboxLi = hGetTagName('li',oBtnboxUl); 102 var oClose = hGetTagName('button',oDialog)[0]; 103 var oBtnSeah = hGetId('btn-seah'); 104 var oIptSeah = hGetId('ipt-seah'); 105 var oBtnReplace = hGetId('btn-replace'); 106 var oIpt1Replace = hGetId('ipt1-replace'); 107 var oIpt2Replace = hGetId('ipt2-replace'); 108 var onOff = true; 109 var sCon = hGetId('con').innerHTML; 110 var aDialogTtLi = hGetTagName('li', hGetTagName('div',oDialog)[0]); 111 var aDialogBdDiv = hGetTagName('div',hGetId('dialog-bd'));; 112 113 hGetTagName('span',btnbox)[0].onclick = function(){ 114 115 if(onOff){ 116 hShow(oBtnboxUl); 117 }else{ 118 hHide(oBtnboxUl); 119 } 120 onOff = !onOff; 121 } 122 123 function fnTab(_this,index){ 124 for (var i = 0; i < aDialogTtLi.length; i++) { 125 aDialogTtLi[i].className = ''; 126 hHide(aDialogBdDiv[i]); 127 } 128 hGetId('con').innerHTML = sCon; 129 _this.className = 'active'; 130 hShow(aDialogBdDiv[index]); 131 } 132 133 aBtnboxLi[0].onclick = function(){ 134 hShow(oDialog); 135 fnTab(aDialogTtLi[0],0); 136 } 137 aBtnboxLi[1].onclick = function(){ 138 hShow(oDialog); 139 fnTab(aDialogTtLi[1],1); 140 } 141 oClose.onclick = function(){ 142 hHide(oDialog); 143 } 144 145 for (var i = 0; i < aDialogTtLi.length; i++) { 146 147 aDialogTtLi[i].index = i; 148 149 aDialogTtLi[i].onclick = function(){ 150 fnTab(this,this.index); 151 } 152 } 153 154 oBtnSeah.onclick = function(){ 155 if(oIptSeah.value == ''){ 156 alert('请输入要查找的内容'); 157 hGetId('con').innerHTML = sCon; 158 }else{ 159 var ohReplace = hReplace(sCon , oIptSeah.value); 160 if(ohReplace.flag === false){ 161 alert('找不到字符:=》'+ oIptSeah.value); 162 hGetId('con').innerHTML = sCon; 163 }else{ 164 hGetId('con').innerHTML = ohReplace.newStr; 165 oIptSeah.value = ''; 166 } 167 } 168 } 169 170 oBtnReplace.onclick = function(){ 171 var str = hGetId('con').innerHTML; 172 if(oIpt1Replace.value == ''){ 173 alert('请输入要替换的内容'); 174 }else{ 175 var ohReplace = hReplace(str , oIpt1Replace.value , oIpt2Replace.value, 1); 176 if(ohReplace.flag === false){ 177 alert('找不到字符:=》'+ oIpt1Replace.value); 178 hGetId('con').innerHTML = str; 179 oIpt1Replace.value = oIpt2Replace.value = ''; 180 }else{ 181 if(oIpt2Replace.value == ''){ 182 if (confirm("确定删除" + oIpt1Replace.value) ==true){ 183 hGetId('con').innerHTML = ohReplace.newStr; 184 oIpt1Replace.value = oIpt2Replace.value = ''; 185 }else{ 186 oIpt1Replace.value = oIpt2Replace.value = ''; 187 return false; 188 } 189 }else{ 190 hGetId('con').innerHTML = ohReplace.newStr; 191 oIpt1Replace.value = oIpt2Replace.value = ''; 192 } 193 } 194 } 195 } 196 } 197 </script> 198 </head> 199 <body> 200 <div id="box"> 201 <div id="con"> 202 妙味课堂是一支充满温馨并且极富人情味的IT培训团队； 203 2010～2011年，我们深度关注WEB前端开发领域，为此精心研发出一套灵活而充满趣味的 JavaScript 课程， 204 2011～2013年，我们精准研发出最新HTML5&CSS3课程，并推出远程培训课程方案，尝试将线下优良的培训模式移植到远程网络培训中， 205 希望尽最大努力，将一种快乐愉悦的授课体验传递给我们的每一位学员。 206 在未来几年内，妙味课堂会逐渐发展成由上百位优秀讲师所带领的创业培训团队， 207 这些优秀讲师将是每个培训区域的独立负责人，他们是妙味课堂未来发展道路中最强大的力量。 208 </div> 209 <div id="btnbox"> 210 <span>展开</span> 211 <ul > 212 <li>查找</li> 213 <li>替换</li> 214 </ul> 215 </div> 216 </div> 217 <div id="dialog" class="f-dn"> 218 <button>X</button> 219 <div class="dialog-tt"> 220 <ul class="f-cb"> 221 <li class="active">查找</li> 222 <li>替换</li> 223 </ul> 224 </div> 225 <div id="dialog-bd" class="dialog-bd"> 226 <div> 227 <input type="text" name="" id="ipt-seah" value="" /> 228 <input type="button" name="" id="btn-seah" value="查找" /> 229 </div> 230 <div class="f-dn"> 231 <input type="text" name="" id="ipt1-replace" value="" /> 232 <input type="text" name="" id="ipt2-replace" value="" /> 233 <input type="button" name="" id="btn-replace" value="替换" /> 234 </div> 235 </div> 236 </div> 237 </body> 238 </html>