js小项目展示：网页换肤代码实现
程序员文章站
2022-10-30 19:15:05
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> 下一篇： [C语言]求两数二进制序列不同的位