js小项目展示：网页换肤代码实现

18-05-15 来源：[db:作者]
收藏我要投稿
js小项目展示：网页换肤代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            height: 600px;
            background: #CCC;
            position: absolute;
            padding: 50px 100px;
        }
        p{
            width: 70%;
            height: 300px;           
            background: #fff;
            float: left;
            font-size: 14px;
            line-height: 25px;
            padding: 30px;


        }
        ul{
            list-style: none
        }
        li{
            float: left;
            width: 50px;
            height: 30px;
            font-size: 16px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            border-radius: 3px;
        }
	    #list{list-style:none;float:right;font-size:16px;line-height:30px;height:30px;width:50px;color:#333;}
        #list li{background:#999;}
	    #lis{display:none;}
        #lis li{background:#aaa;}
        #list ul li:hover{background:#F60;color:#fff;}
        #tab{float:left;border:15px solid #666;padding:5px 10px;width:400px;height:100px;margin-top:10px;}
        hr{background-color:#F60;height:2px;clear:both;}
        #tab{display:none;}
        #tab ul .selected{background:#F60;color:#fff;}
        .selected{display:block;}
        #search,#replace{display:none;}
        span{background:yellow;}
    </style>
</head>
<body>
    <div id="box">
        <p>
                1969年1月，我到文安驿公社接北京知青。就是在这个时候，我第一次见到了近平。当时，梁家河派了十几个年轻力壮的社员去接知青。怕人手不够，我们还牵了毛驴，帮着驮行李。知青们的行李有铺盖卷，有箱子，我们轮流帮着拿行李，你拿一气儿，我拿一气儿，几十个人，浩浩荡荡地就回到村里来了。我记得很清楚，当时梁家河村一共来了十五名北京知青，十一名男知青，四名女知青。当时梁家河村委会接待室是一队的地方，分来五名男知青，四名女知青；近平和其余五名男知青在后面的二队。村里当时安排我父亲给二队的知青做饭。
        </p>
        <ul id="list">
            <li>展开
                <ul id="lis">
                    <li>查找</li>
                    <li>替换</li>
                </ul>
            </li>
        </ul>
        <div id="tab">
            <ul>
                <li>查找</li>
                <li>替换</li>
            </ul>
            <hr/ >
            <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>
    <script>
    window.onload=function(){
        var list=document.getElementById('list');
        var listLi=list.getElementsByTagName('li')[0];
        var lis=document.getElementById('lis');
        var li=lis.getElementsByTagName('li');
        var tab=document.getElementById('tab');
        var oLi=tab.getElementsByTagName('li');
        var div=tab.getElementsByTagName('div')
        var oinput=div[0].getElementsByTagName('input');
        var ainput=div[1].getElementsByTagName('input');
        var op=document.getElementsByTagName('p')[0];
        listLi.onclick=function(){
            lis.style.display='block';
        }
        for (var i = 0; i < li.length; i++) {
            change(oLi);
            change(li);
        }
        var text=op.innerHTML;
        // console.log(op.innerHTML);
        oinput[1].onclick=function(){
            var str=oinput[0].value;
            // console.log(op);
            if(op.innerHTML.indexOf(str)==-1){
                alert("没有找到文字");
            }else if(str==""){
                alert("请输入文字");
            }
            op.innerHTML=text;
            op.innerHTML=op.innerHTML.split(str).join('<span>'+str+'</span>');
        }
        ainput[2].onclick=function(){
            var str=ainput[0].value;
            var newstr=ainput[1].value;
            if(op.innerHTML.indexOf(str)==-1){
                alert("没有找到文字");
            }else if(str==""){
                alert("请输入文字");
            }
            op.innerHTML=text;
            op.innerHTML=op.innerHTML.split(str).join('<span>'+newstr+'</sapn>');
        }
        function change(obj){
            obj[i].index=i;
            obj[i].onclick=function(){
                tab.style.display='block';
                for (var i = 0; i < li.length; i++) {
                    oLi[i].className="";
                    div[i].style.display='none';
                }
                oLi[this.index].className="selected";
                div[this.index].style.display='block';
            }
        }
    }
    </script>
</body>
</html>
点击复制链接与好友分享!回本站首页