一个网页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> <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> <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> <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>
共有 0 条评论