Question

我试图让x秒后显示另一张表，到目前为止我做得很好。我需要将'等待x秒'放置一次所以我需要创建一个cookie，并检查cookie是否存在只允许直接div。

说明： - 第一次使用者=您可以在x秒后检查内容 - 重复用户=直接转到内容

需要：创建cookie的能力，检查用户是否重复=打破第一个div并直接转到第二个div。这就是我得到的：

<style>
#picOne, #picTwo {
position:absolute;
display: none;
}

#pics {
width:100px;
height:100px;
}
</style>
 <script type = "text/javascript">
/*author Philip M. 2010*/

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs)-1;
ticker = setInterval("tick()",1000);   // every second
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
// startTimer(15);  // remove forward slashes in front of startTimer to repeat if required
}

document.getElementById("countdown").innerHTML = secs;
}

startTimer(15);  // 15 seconds 

</script>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(0500).delay(15000).fadeOut(000);
    $('#picTwo').delay(15000).fadeIn(1500);
});
</script>

</head>
<body>

<div id="pics">
<div  id="picOne"> Your video will begin in

<span id="countdown" style="font-weight: bold;">15</span> </div>
<div id="picTwo">//something</object>
</div>
</div>

Answer 1

这是我写的简单 CookieManager对象，用于演示如何实现此目的。在（MDN document.cookie docs）[https://developer.mozilla.org/en-US/docs/Web/API/document.cookie]中有一个更强大的类型的东西，但这应该有帮助你有一个基本的了解。您可以/应该扩展它以允许域，路径，到期等。

首次访问该页面时，您会看到倒计时消息。倒计时完成后，jquery用于替换#content div的内容（第48-51行）。刷新页面时，如果visited cookie存在，将立即显示内容。

<!DOCTYPE html>
<html>
<head>
    <title>document.cookie Example</title>
</head>
<body>
<div id="content"><p>Your content will be shown in <span id="countdown">15</span> seconds</p></div>
<a href="#" class="delete">Remove Cookie</a>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var main = new Main();
    main.init();
});

var Main = function() {
    var _this = this,
        cookieMngr = new CookieManager(),
        countInterval = false,
        count = 15;

    _this.init = function() {
        if(cookieMngr.getCookie("visited")) {
            _this.addContent();
        } else {
            countInterval = setInterval(_this.updateCountdown, 1000);
        }

        $(".delete").on("click", function(evt) {
            evt.preventDefault();
            cookieMngr.deleteCookie("visited");
            document.location = document.location;
        });
    };

    _this.updateCountdown = function() {
        if(count > 0) {
            count--;
            $("#countdown").text(count);
        } else {
            clearInterval(countInterval);
            countInterval = false;
            cookieMngr.setCookie("visited", "yes");
            _this.addContent();
        }
    };

    _this.addContent = function() {
        var newContent = $(document.createElement("div")).html("<p>This is the content you've been waiting for.</p>");
        $("#content").empty().append(newContent);
    };

    return _this;
};

var CookieManager = function() {
    _this = this;

    _this.setCookie = function(cookieKey, cookieValue) {
        var cookieStr = cookieKey+"="+cookieValue;
        document.cookie = cookieStr;
    };

    _this.getCookie = function(cookieKey) {
        var regex = new RegExp(cookieKey+"\=([^;]+)");
        var cookie = document.cookie.match(regex);
        if(cookie !== null) {
            return cookie[1];
        } else {
            return false;
        }
    };

    _this.deleteCookie = function(cookieKey) {
        document.cookie = cookieKey+"=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    };

    return _this;
};
</script>
</body>
</html>

如果cookie存在，则删除第一个jquery元素

1 个答案: