0

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

解释：-第一次用户=您可以在 x 秒后检查内容-重复用户=直接进入内容

需要：创建 cookie 的能力，检查用户是否重复=打破第一个 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>
4

1 回答 1

0

这是我编写的一个简单的CookieManager 对象，用于演示如何完成此操作。在 (MDN document.cookie docs)[https://developer.mozilla.org/en-US/docs/Web/API/document.cookie] 中有一个更健壮的版本，但这应该会有所帮助你得到一个基本的了解。您可以/应该扩展它以允许域、路径、到期等。

首次访问该页面时，您将看到倒计时消息。倒计时完成后，使用 jquery 替换#contentdiv 的内容（第 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>
于 2013-09-08T17:51:08.467 回答