话不多说开始。
HTML基本框架:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<button id="btn">我是按钮</button>
<div>
<li> 1. Life was like a box of chocolates, you never know what you’re gonna get. <span id="a">(生命就像一盒巧克力,结果往往出人意料) </span></li>
<li>2. Stupid is as stupid does. <span id="b">(蠢人做蠢事,也可理解为傻人有傻福) </span></li>
<li> 3. Miracles happen every day. <span id="c">(奇迹每天都在发生) </span></li>
<li>4. Jenny and I was like peas and carrots.<span id="d">(我和珍妮形影不离) </span></li>
<li> 5. Have you given any thought to your future?<span id="e">(你有没有为将来打算过呢)</span></li>
<li> 6. You just stay away from me please.<span id="f">(求你离开我) </span></li>
<li> 7. If you are ever in trouble, don’t try to be brave, just run, just run away.<span id="g">(你若遇上麻烦,不要逞强,你就跑,远远跑开)</span> </li>
<li> 8. It made me look like a duck in water.<span id="h">(它让我如鱼得水) </span></li>
<li> 9. Death is just a part of life, something we’re all destined to do.<span id="i">(死亡是生命的一部分,是我们注定要做的一件事) </span></li>
<li>10. I was messed up for a long time.<span id="j">(这些年我一塌糊涂) </span></li>
<li>11. I don’t know if we each have a destiny, or if we’re all just floating around accidental—like on a breeze.<span id="k">(我不懂我们是否有着各自的命运,还是只是到处随风飘荡)</span></li>
</div>
<script src="./text.js">
</script>
</body>
</html>
用scr引入js文件。
JS:
let btn=document.getElementById("btn");
let char=document.getElementsByTagName('span');
let count=1;
btn.onclick=function(){
if(count%2!=0)
{/*
document.getElementById('a').style.visibility="hidden";
document.getElementById('b').style.visibility="hidden";
document.getElementById('c').style.visibility="hidden";
document.getElementById('d').style.visibility="hidden";
document.getElementById('e').style.visibility="hidden";
document.getElementById('f').style.visibility="hidden";
document.getElementById('g').style.visibility="hidden";
document.getElementById('h').style.visibility="hidden";
document.getElementById('i').style.visibility="hidden";
document.getElementById('j').style.visibility="hidden";
document.getElementById('k').style.visibility="hidden";
*/
for(let i=0;i<=10;i++)
{
char[i].style.visibility="hidden";
}
count++;
}
else if(count%2==0)
{/*
document.getElementById('a').style.visibility="visible";
document.getElementById('b').style.visibility="visible";
document.getElementById('c').style.visibility="visible";
document.getElementById('d').style.visibility="visible";
document.getElementById('e').style.visibility="visible";
document.getElementById('f').style.visibility="visible";
document.getElementById('g').style.visibility="visible";
document.getElementById('h').style.visibility="visible";
document.getElementById('i').style.visibility="visible";
document.getElementById('j').style.visibility="visible";
document.getElementById('k').style.visibility="visible";
count++;*/
for(let i=0;i<=10;i++)
{
char[i].style.visibility="visible";
}
count++;
}
}
这里用了两种方法:
1.对<button>和每个<span>都设置一个id,通过JS的document.getElementById()获取<button>和不同<span>,最后对<button>绑定一个onclick事件,绑定事件发生时的函数:更改<span>style属性,变为奇数点击隐藏,偶数时变为显示。
2.不同于第一种,将document.getElementById()变为document.getElementsByTagName()获取一个<span>数组再用循环对每个元素的style属性进行更改。这个相对于比较简单。
———————————————————————————————————————————
注:编者水平有限,若有错误欢迎指正,或者有更好的解决办法欢迎提出讨论
封面:P站:【KFR id=4265931 】