如何随机显示 div only sometimes？

Question

我正在尝试在我网站的 HTML 中制作自己的订阅选择弹出窗口。我希望弹出窗口仅有时随机显示。我不希望它一直可见。我希望它有 1/3 的时间可见。请帮我怎么做。我在网上查了一下，但它总是误解我的问题，所以我把它贴在这里。这是代码：

<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>

Answer 1

您可以通过多种方式进行此操作。 html5 系列中涉及随机性的大多数情况下，使用 javascript Math.random 方法。要在 html 文件中使用 javascript，请创建一个脚本标签。

<!--place the script tag in your head section-->
<script type="text/javascript">
    function popupForThisUser(){     
        setTimeout(popupRandom,5000); //first arg calls function second arg is time in miliseconds
    }
    function popupRandom(){      //this gets called by setTimeout
        var random = Math.floor(Math.random() * 100) + 1; //integer between 1-100;
        if(random < 30){ //Logic for popup chance 
            return myPopup()  //return your popup
        }
    };
</script>  <!--close script-->
<body onload="popupForThisUser()">  <!--call to your initial function-->

使用这样的函数，您可以将弹出窗口在 5 秒后出现的几率设置为 30%。

Answer 2

如果您想要定义每个用户显示 div 的时间间隔，您将需要访问浏览器中的某种形式的存储，例如 indexedDB 或 cookie。然后你可以在每次页面加载时迭代存储，如果它匹配访问次数，你可以选择显示 div.

Answer 3

您可以使用元素的 visibility 属性和 setInterval() 函数以及 Math.random() 来实现您想要的效果。你可以使用这样的东西：

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)

<html>
<head>
</head>
<body style="background-color:grey">
  <div id="my-div" style="background-color:red">
    <p>This is my div</p>
  </div>
</body>
</html>

如何随机显示 div only sometimes？

How to show a div only sometimes randomly?

html

javascript

css

blogger