初识js

来源：互联网发布：第三类顶级域名编辑：程序博客网时间：2024/05/20 07:18

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>

#box {
width: 600px;
overflow: hidden;
border: 10px solid #76777b;
margin: 0 auto;
background: #eaeaea;
}
#span {
padding: 15px;

display: block;
line-height: 28px;
font-size: 20px;
}

a {
float: left;
width: 40px;
height: 20px;
border: 1px solid #000;
padding: 10px;
margin: 20px;
text-decoration: none;
text-align: center;
color: #000;
}

.active {
background: orange;
}

p {
clear: both;
margin: 18px;
}
</style>
</head>

<body>
<div id="box">
<span id="span">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。
</span>
<a class="active" href="#">查找</a>
<a href="#">替换</a>

<p>
<input type="text">
<input type="button" value="查找">
</p>
<p>
<input type="text"> <input type="text">
<input type="button" value="替换">
</p>
</div>
<script type="text/javascript">
var Ospan = document.getElementsByTagName("span")[0];
var Odiv = document.getElementsByTagName("a");
var Op = document.getElementsByTagName("p");
var Oinput = document.getElementsByTagName("input");
var str1 = Ospan.innerHTML;
Op[1].style.display = "none";
Odiv[0].onclick = function() {
for(i = 0; i < Odiv.length; i++) {
Odiv[i].className = "";
}
this.className = "active";
Op[1].style.display = "none";
Op[0].style.display = "block";
}
Odiv[1].onclick = function() {
for(i = 0; i < Odiv.length; i++) {
Odiv[i].className = "";
}
this.className = "active";
Op[0].style.display = "none";
Op[1].style.display = "block";
}
Oinput[1].onclick = function() {
if(Oinput[0].value == "") {
alert(请输入内容)
}
str = Oinput[0].value;
if(str1.indexOf(str) != -1) {
str1 = Ospan.innerHTML
var Otext = str1.split(str);
arr = Otext.join("<span style='background:orange;'>" + str + "</span>");
Ospan.innerHTML = arr;

} else {

str= '';
alert('未查找到');
}
}

Oinput[4].onclick = function() {
if(Oinput[2].value == "") {
alert(请输入内容)
}
str2 = Oinput[2].value;
str3 = Oinput[3].value;
if(str1.indexOf(str2) != -1) {
str1 = Ospan.innerHTML
var Otext1 = str1.split(str2);
arr2 = Otext1.join("<span style='background:orange;'>" + str3 + "</span>");
Ospan.innerHTML = arr2;

} else {

str2='';
str3='';
alert('未查找到');
}

}
</script>
</body>

</html>

阅读全文

0 0