<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
font-family: "微软雅黑";
font-size: 16px;
}
ul,p,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
#wrap{
margin:100px auto;
width: 635px;
height: 493px;
background: #efefe7;
position: relative;
}
#texts{
width: 460px;
height: 212px;
background: #FFFFFF;
position: absolute;
left: 26px;
top: 62px;
line-height: 40px;
padding: 20px 20px;
}
#menu{
width: 80px;
height: 40px;
background: #808080;
position: absolute;
top: 62px;
right: 16px;
color: #FFFFFF;
text-align: center;
line-height: 40px;
font-family: "微软雅黑";
}
#menu:hover{
cursor: pointer;
}
#fns{
width: 470px;
height: 138px;
border: 5px solid #CCCCCC;
position: absolute;
left: 26px;
bottom: 20px;
background: #e7e7b5;
padding-left: 20px;
display: none;
}
#options{
border-bottom: 2px solid red;
width: 440px;
height: 32px;
margin-top: 20px;
}
#options li{
width: 78px;
height: 32px;
line-height: 32px;
float: left;
text-align: center;
}
#options li:hover{
cursor: pointer;
}
.onOffs{
position: absolute;
top: 22px;
right: 24px;
}
.onOffs img:hover{
cursor: pointer;
}
.inp{
margin-top: 22px;
}
.list{
position: absolute;
top: 102px;
right: 16px;
display: none;
}
.list li{
width: 80px;
height: 40px;
background: #808080;
text-align: center;
line-height: 40px;
font-family: "微软雅黑";
margin-top: 1px;
background: #c0c0c0;
}
.list li:hover{
cursor: pointer;
}
#texts span{
background: cornflowerblue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="texts"><p>***祝贺马克龙当选法国总统。***指出，中法关系具有深厚历史底蕴，在中国外交中占有重要地位。建交53年来，两国关系经受住了国际风云变幻考验，战略性不断增强。推动中法关系在新起点上迈上新台阶，符合两国人民和国际社会共同期待</p></div>
<div id="fns">
<div class="onOffs">
<img src="img6/3.png" />
</div>
<ul id="options">
<li>查找</li>
<li>替换</li>
</ul>
<div class="inp">
<input type="text" value="" />
<input type="button" value="查找"/>
<input type="text" value="" />
<input type="button" value="替换"/>
</div>
</div>
<div id="menu">
展开
</div>
<ul class="list">
<li>查找</li>
<li>替换</li>
</ul>
</div>
<script src="js/move.js"></script>
<script>
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(main);
function main(){
var wrap = document.getElementById("wrap");
var texts = document.getElementById("texts");
var fns = document.getElementById("fns");
var onOffs = wrap.getElementsByClassName("onOffs")[0];
var options = document.getElementById("options");
var aLi1 = options.getElementsByTagName("li");
var inp = wrap.getElementsByClassName("inp")[0];
var aInp = inp.getElementsByTagName("input");
var menu = document.getElementById("menu");
var list = wrap.getElementsByClassName("list")[0];
var aLi2 = list.getElementsByTagName("li");
var oP = document.getElementsByTagName("p")[0];
var strText = oP.innerHTML;
var onOff = true;
for (var i=0;i<aLi2.length;i++) {
aLi2[i].index = i;
}
menu.onclick = function(){
if (onOff) {
list.style.display = "block";
}else{
list.style.display = "none";
}
onOff = !onOff;
}
aLi2[0].onclick = function(){
if (onOff = true) {
aInp[1].style.display = "inline";
}
onOff = !onOff;
fns.style.display = "block";
for (var i=2;i<aInp.length;i++) {
aInp[i].style.display = "none";
}
aLi1[0].style.backgroundColor ="red";
aLi1[0].style.color = "#fff";
aLi1[1].style.backgroundColor ="";
aLi1[1].style.color = "";
}
aLi2[1].onclick = function(){
fns.style.display = "block";
aLi1[1].style.backgroundColor ="red";
aLi1[1].style.color = "#fff";
aLi1[0].style.backgroundColor ="";
aLi1[0].style.color = "";
for (var i=2;i<aInp.length;i++) {
aInp[i].style.display = "inline";
}
aInp[1].style.display = "none";
}
aLi1[1].onclick = function(){
aLi1[0].style.backgroundColor ="";
aLi1[0].style.color = "";
aLi1[1].style.backgroundColor ="red";
aLi1[1].style.color = "#fff";
for (var i=2;i<aInp.length;i++) {
aInp[i].style.display = "inline";
}
aInp[1].style.display = "none";
}
aLi1[0].onclick = function(){
aLi1[1].style.backgroundColor ="";
aLi1[1].style.color = "";
aLi1[0].style.backgroundColor ="red";
aLi1[0].style.color = "#fff";
for (var i=2;i<aInp.length;i++) {
aInp[i].style.display = "none";
}
aInp[1].style.display = "inline";
}
onOffs.onclick = function(){
fns.style.display = "none";
}
aInp[1].onclick = function(){
oP.innerHTML = strText;
var strInText = aInp[0].value;
var newText = "";
if (strInText.length == 0) {
alert('请输入要查找的内容')
}else{
if (strText.indexOf(strInText) != -1 ) {
newText = strText.split(strInText).join('<span>'+strInText+'</span>');
oP.innerHTML = newText;
}else{
alert('没有找到您输入的【'+strInText+'】');
}
}
}
aInp[3].onclick = function(){
var strInText = aInp[0].value;
var strInTexts = aInp[2].value;
var newInText = "";
strText = oP.innerHTML;
if (strInText.length == 0) {
alert('请输入要替换的内容')
}else{
if (strText.indexOf(strInText) != -1 && strInTexts.length == 0) {
if (confirm('您确认要删除'+strInText+'吗？')) {
newInText = strText.split(strInText).join('');
oP.innerHTML = newInText;
return true;
}else{
return false;
}
}else{
if (strText.indexOf(strInText) == -1) {
alert('没有找到您输入的【'+strInText+'】');
aInp[0].value = "";
aInp[2].value = "";
}else{
newInText = strText.split(strInText).join('<span>'+strInTexts+'</span>');
oP.innerHTML = newInText;
}
}
}
}
}
</script>
</body>
</html>
posted on
