如何在JavaScript中每两天仅显示一次弹出窗口？

Question

如何在JavaScript中每两天仅显示一次弹出窗口？

3

我需要一个简单的代码，使用cookies每个用户两天展示一次弹出窗口。我不懂如何使用javascript编程，如果有人可以帮助我就太好了。

目前我拥有的弹出窗口代码如下：

<script type="text/javascript"> 
function getValue()
{
document.getElementById("bsadsheadline").style.display = 'none';
}

$(document).ready(function () {
    setTimeout(function(){
        $('#bsadsheadline').fadeIn(500);
    }, 30000);
});
</script>
<div id="bsadsheadline">
<div id="bloggerspicesflotads">
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em"></span>
<span style="color:#fff;font-size:12px;font-weight:bold;text-shadow:black 0.01em 0.01em 0.01em;float:right;padding-top:2px;padding-right:115px"><a href="javascript:void(0);" onclick="getValue();">inchide(x)</a></span>
</div>
<div id="bsadsbase">
my code
</div></div>

感谢您的提前帮助。

- ForForce

Java还是JavaScript？ - Madhawa Priyashantha

嗯...我对Java或JavaScript一无所知，我认为代码是用JavaScript编写的，但不确定。 - ForForce

嗯，你的代码是用JavaScript编写的。为什么要使用cookies？ - Madhawa Priyashantha

谢谢你告诉我这个 :) ... 嗯...因为我在一些网站上看到可以使用cookies来实现，所以我猜是这样。 - ForForce

你有其他的想法吗？！ - ForForce

4个回答

1

检查这段代码...

if(localStorage.last){
    if( (localStorage.last - Date.now() ) / (1000*60*60*24*2) >= 1){ //Date.now() is in milliseconds, so convert it all to days, and if it's more than 1 day, show the div
        document.getElementById('div#popup').style.display = 'block'; //Show the div
        localStorage.last = Date.now(); //Reset your timer
    }
}
else {
    localStorage.last = Date.now();
    document.getElementById('div#popup').style.display = 'block'; //Show the div because you haven't ever shown it before.
}

为了达到完全准确的结果，您需要使用数据库来维护用户ID和显示给用户的封锁时间。然而，如果这不是非常严格的规定，您可以通过将时间存储在浏览器的cookie中，并根据此来显示/隐藏div，获得近似的结果。

- Domain

我不知道如何将这个放入我的代码中 :( 。附言：我不希望这仅适用于我的网站用户。我希望这适用于所有访问者。 - ForForce

将上述代码放入您的脚本文件或内联脚本标签中，确保您的div#popup设置为display:none，此代码不限制用户，因此适用于所有访问者。 - Domain

1

将此代码添加到页面头部即可完成任务：

<script>
$(document).ready(function() {

    // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
    // The cookie will expire and every 2 days and the dialog will show again.
    if (jQuery.cookie('whenToShowDialog') == null) {

        // Create expiring cookie, 2 days from now:
        jQuery.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });

        // Show dialog
        setTimeout(function(){
        $('#bsadsheadline').fadeIn(500);
    }, 30000);       
    }

});
</script>

感谢@John Valai的帮助。

- ForForce

-1

下面的代码会在您的浏览器中打开一个窗口。

window.open("url");

如果您想每两天打开一次窗口，最好的方法是将其包装在某种cron作业中。不知道为什么您要使用cookie来打开窗口。

- Pat Doyle

2

我想使用cookies来跟踪用户的时间，如果该用户第二天再次访问我的页面，则不希望他再次看到弹出窗口，只有在两天后才会显示。我想更新我已经拥有的代码。我尝试了这个：

if($.cookie('popup') != 'seen'){     $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.

但它没有起作用。 - ForForce

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jv-k · Accepted Answer

我的解决方案使用cookies。

将以下代码放在页面的<head>中，确保加载了jQuery、jQuery UI（用于显示对话框）和jQuery Cookie插件库：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

将以下代码放在页面底部，就在</body>标签前面。

$(document).ready(function() {

   // Make sure dialog is initially hidden:
   $('#dialog').dialog({autoOpen: false});

    // Check for the "whenToShowDialog" cookie, if not found then show the dialog and save the cookie.
    // The cookie will expire and every 2 days and the dialog will show again.

    if ($.cookie('whenToShowDialog') == null) {

        // Create expiring cookie, 2 days from now:
        $.cookie('whenToShowDialog', 'yes', { expires: 2, path: '/' });

        // Show dialog
        $('#dialog').dialog("open");        
    }

});
</script>

将以下代码放置在您网页的 <body> 部分，并将 <p> 替换为您想要的内容。

<div id="dialog" title="Test dialog">
  <p>This dialog will only show every 2 days.</p>
</div>

如果您遇到任何问题，请将页面链接或HTML代码发布出来，我会帮助您插入此代码。我已经测试过它，它可以正常工作。

以下是代码示例： https://jsfiddle.net/d2s1r0mp/1/