脚本宝典收集整理的这篇文章主要介绍了js实例教程-js小项目展示：网页换肤代码实现，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
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> <p id="box"> <p> 1969年1月，我到文安驿公社接北京知青。就是在这个时候，我第一次见到了近平。当时，梁家河派了十几个年轻力壮的社员去接知青。怕人手不够，我们还牵了毛驴，帮着驮行李。知青们的行李有铺盖卷，有箱子，我们轮流帮着拿行李，你拿一气儿，我拿一气儿，几十个人，浩浩荡荡地就回到村里来了。我记得很清楚，当时梁家河村一共来了十五名北京知青，十一名男知青，四名女知青。当时梁家河村委会接待室是一队的地方，分来五名男知青，四名女知青；近平和其余五名男知青在后面的二队。村里当时安排我父亲给二队的知青做饭。 </p> <ul id="list"> <li>展开 <ul id="lis"> <li>查找</li> <li>替换</li> </ul> </li> </ul> <p id="tab"> <ul> <li>查找</li> <li>替换</li> </ul> <hr/ > <p id="search"> <input type="text" /> <input type="button" value="查找"> </p> <p id="replace"> <input type="text" /> <input type="text" /> <input type="button" value="替换"> </p> </p> </p> <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 p=tab.getElementsByTagName('p') var oinput=p[0].getElementsByTagName('input'); var ainput=p[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=""; p[i].style.display='none'; } oLi[this.index].className="selected"; p[this.index].style.display='block'; } } } </script> </body> </html>
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> <p id="box"> <p> 1969年1月，我到文安驿公社接北京知青。就是在这个时候，我第一次见到了近平。当时，梁家河派了十几个年轻力壮的社员去接知青。怕人手不够，我们还牵了毛驴，帮着驮行李。知青们的行李有铺盖卷，有箱子，我们轮流帮着拿行李，你拿一气儿，我拿一气儿，几十个人，浩浩荡荡地就回到村里来了。我记得很清楚，当时梁家河村一共来了十五名北京知青，十一名男知青，四名女知青。当时梁家河村委会接待室是一队的地方，分来五名男知青，四名女知青；近平和其余五名男知青在后面的二队。村里当时安排我父亲给二队的知青做饭。 </p> <ul id="list"> <li>展开 <ul id="lis"> <li>查找</li> <li>替换</li> </ul> </li> </ul> <p id="tab"> <ul> <li>查找</li> <li>替换</li> </ul> <hr/ > <p id="search"> <input type="text" /> <input type="button" value="查找"> </p> <p id="replace"> <input type="text" /> <input type="text" /> <input type="button" value="替换"> </p> </p> </p> <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 p=tab.getElementsByTagName('p') var oinput=p[0].getElementsByTagName('input'); var ainput=p[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=""; p[i].style.display='none'; } oLi[this.index].className="selected"; p[this.index].style.display='block'; } } } </script> </body> </html> 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-js小项目展示：网页换肤代码实现全部内容，希望文章能够帮你解决js实例教程-js小项目展示：网页换肤代码实现所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。