JS:实现通过添加一个按钮，让上述的括号中的字体隐藏，然后再次点击之后出现，并且再点击以后文字再次出现。

最新推荐文章于 2023-05-17 08:45:21 发布

轩宇试图

最新推荐文章于 2023-05-17 08:45:21 发布

阅读量635

点赞数 2

文章标签： javascript elementui webview

本文链接：https://blog.csdn.net/XHXGKD/article/details/122011771

版权

话不多说开始。

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 】

轩宇试图

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS:实现通过添加一个按钮，让上述的括号中的字体隐藏，然后再次点击之后出现，并且再点击以后文字再次出现。

JS:实现通过添加一个按钮，让上述的括号中的字体隐藏，然后再次点击之后出现，并且再点击以后文字再次出现。
复制链接

扫一扫