一个网页3个代码,你只想展示其中一个怎么办?

添加JS代码如下:

<!--随机只展示一例JS-->
  <script>
    let adDivs = document.querySelectorAll('.tx-info-module-box');
    let randomIndex = Math.floor(Math.random() * adDivs.length);
    adDivs[randomIndex].style.display = 'block';
    for (let i = 0; i < adDivs.length; i++) {
      if (i!== randomIndex) {
        adDivs[i].style.display = 'none';
      }
    }
  </script>

这段 JavaScript 代码主要实现了以下功能:
它首先通过 querySelectorAll('.tx-info-module-box') 获取所有具有特定类名 tx-info-module-box 的元素,并将它们存储在 adDivs 数组中。然后,通过生成一个随机索引值 randomIndex ,并将该索引对应的元素的显示设置为 block ,而对于其他元素(除了随机选中的那个)则将其显示设置为 none ,这样就实现了随机显示其中一个元素而隐藏其他元素的效果。

我的案例:有3个广告,我只想让展示其中一个,下面是我的代码:

<div class="tx-info-module-box tx-info-module-down-box tx-info-module-down1-box"><section><div class="tx-info-module-imgbox"><img src="//www.lingyuok.com/images/okx.png" alt="欧易OKX"> </div><div class="tx-info-module-down-txt"><h3 class="tx-info-module-txt-title">欧易OKX</h3><p class="tx-info-module-txt-info">全球三大交易所之一,注册领50 USDT数币盲盒,币圈常用的交易平台!</p></div><a href="https://www.lingyuok.com/url/296.html" title="APP下载" class="tx-info-module-btn" target="_blank" rel="nofollow">APP下载</a>&nbsp;&nbsp;<a href="https://www.lingyuok.com/url/296.html" title="官网注册" class="tx-info-module-btn1" target="_blank" rel="nofollow" style="background-color:#242b33">官网注册</a></section></div>


<div class="tx-info-module-box tx-info-module-down-box tx-info-module-down1-box"><section><div class="tx-info-module-imgbox"><img src="//www.lingyuok.com/images/bian.png" alt="币安Binance"> </div><div class="tx-info-module-down-txt"><h3 class="tx-info-module-txt-title">币安Binance</h3><p class="tx-info-module-txt-info">币安交易所是世界领先的数字货币交易平台,在手机上即可买卖btc等数字货币!</p></div><a href="https://www.lingyuok.com/url/293.html" title="APP下载" class="tx-info-module-btn" target="_blank" rel="nofollow">APP下载</a>&nbsp;&nbsp;<a href="https://www.lingyuok.com/url/293.html" title="官网注册" class="tx-info-module-btn1" target="_blank" rel="nofollow" style="background-color:#242b33">官网注册</a></section></div>


<div class="tx-info-module-box tx-info-module-down-box tx-info-module-down1-box"><section><div class="tx-info-module-imgbox"><img src="//www.lingyuok.com/images/htx.png" alt="火币HTX"> </div><div class="tx-info-module-down-txt"><h3 class="tx-info-module-txt-title">火币HTX</h3><p class="tx-info-module-txt-info">全球三大交易所之一,新人注册火币享241 USDT新人礼包!</p></div><a href="https://www.lingyuok.com/url/292.html" title="APP下载" class="tx-info-module-btn" target="_blank" rel="nofollow">APP下载</a>&nbsp;&nbsp;<a href="https://www.lingyuok.com/url/292.html" title="官网注册" class="tx-info-module-btn1" target="_blank" rel="nofollow" style="background-color:#242b33">官网注册</a></section></div>
<!--随机只展示一例JS-->
  <script>
    let adDivs = document.querySelectorAll('.tx-info-module-box');
    let randomIndex = Math.floor(Math.random() * adDivs.length);
    adDivs[randomIndex].style.display = 'block';
    for (let i = 0; i < adDivs.length; i++) {
      if (i!== randomIndex) {
        adDivs[i].style.display = 'none';
      }
    }
  </script>

 

文章版权归原作者所有或来自互联网,未经允许请勿转载。如有侵权请联系我删除,谢谢!
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录