18910140161

JavaScript-如何只随机显示DIV?-堆栈溢出

顺晟科技

2022-10-18 12:59:37

70

我正在尝试在我的网站上用HTML制作我自己的订阅选择弹出窗口。我希望弹出窗口只在某些时候随机显示。我不想让它一直可见。我希望它有三分之一的时间是可见的。请帮助我如何做它。我在网上查了一下,但它总是误解我的问题,所以我把它贴在这里。下面是代码:

<div id="demo-float" class='demo-float'>
  <span class='df-hide'>
    <i class='fas fa-times'></i>
  </span>
  <div class='df-logo'></div>
  <h3>Subscribe</h3>
  <p class='excerpt'>Would you like to receive notifications on latest updates from Usual Queries?</p>
  <a href='https://usualqueries.blogspot.com/p/subscribe.html' title='Sub'>Subscribe</a>
</div>

顺晟科技:

您可以通过使用元素的visibility属性和setInterval()函数,以及Math.random()

<代码><;HTML(>;)<;头部>;<;/标题>;<;body style=“ background-color:grey ”>;<;DIV ID=“ my-DIV ” style=“ background-color:red ”>;<;P>;这是我的部门<;/P>;<;/DIV>;<;/正文>;<;/HTML>;

有很多方法可以做到这一点。大多数情况下,当HTML5系列涉及随机性时,使用JavaScript Math.Random方法。要在HTML文件中使用JavaScript,请创建脚本标记。

let my_div = document.getElementById("my-div");

setInterval(() => {
  if (Math.random()<=0.33) // Chance = 1/3
    my_div.style.visibility === "hidden" ? my_div.style.visibility = "visible" : my_div.style.visibility = "hidden"; // If the element's visibility is set hidden, then set it back to visible and vice versa
}, 1e3); // Set the frequency of this interval to every 1 sec (1*10^3 ms)

有了这样的功能,你可以将弹出窗口在5秒后显示的几率设置为30%。

如果你想有一个定义的时间间隔来显示每个用户的DIV,你需要访问浏览器中的某种形式的存储,如IndexedDB或cookie.然后,您可以在每次页面加载时对存储进行迭代,如果它与访问次数匹配,则可以选择显示DIV.

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航