查找 替换 

<!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>

 

posted @ 2014-12-27 11:16  mayufo  阅读(182)  评论(0)    收藏  举报