javascript - JS cookie 下降和倒数计时器不工作

Question

嗨，谁能看看下面的内容并告诉我为什么它不起作用？

我正在努力创建一个带有倒数计时器的弹出框并设置一个 cookie，这样它就不会在每个页面上都显示弹出框。它应该设置一个 cookie 并检测它，我认为它正在这样做，但现在倒数计时器没有明显倒数。

$(document).ready(function() {  

if(readCookie('oldsite') != 'stay') //Unless we find the cookie, we show the banner ...
 {
var time_left = 12;
var cinterval;

cinterval = setInterval('time_dec()', 1000);

var id = '#dialog';

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//transition effect     
$('#mask').fadeIn(500); 
$('#mask').fadeTo("slow",0.9);  

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);     

    //if Disagree word is clicked
    $('#disagree').click(function () {
            $(this).hide();
            $('.window').hide();
            $('#mask').hide();
            time_left = 0;
    }); 

    //if mask is clicked
    $('#mask').click(function () {
            createCookie('oldsite', 'stay', 1);    //create the cookie for 1 day
            $(this).hide();
            $('.window').hide();
    });     
}

//Functions
function time_dec(){
time_left--;
document.getElementById('countdown').innerHTML = time_left;
if(time_left == 1){
    var originalstring = document.getElementById('countdown2').innerHTML;
    var newstring = originalstring.replace('seconds','second');
    document.getElementById('countdown2').innerHTML = newstring;
    window.location.replace("http://cadfemukandireland.com/");
    clearInterval(cinterval);
}
}

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}           
});

CSS 是:

/* CSS Document */

#mask {
position: absolute;
left: 0;
top: 0;
z-index: 9000;
background-color: #000;
display: none;
}

#boxes .window {
position: absolute;
left: 0;
top: 0;
width: 440px;
height: 200px;
display: none;
z-index: 9999;
padding: 20px;
border-radius: 15px;
text-align: center;
}

#boxes #dialog {
width: 750px;
height: 300px;
padding: 75px 50px 10px 50px;
background-color: #ffffff;
font-family: 'Segoe UI Light', sans-serif;
font-size: 15pt;
}

#popupfoot {
font-size: 16pt;
position: absolute;
bottom: 0px;
width: 350px;
left: 225px;
padding-bottom:20px;
}

#disagree {
cursor:pointer;
}

html 是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
<div id="dialog" class="window">
    <p>As part of our re branding to CADFEM, we have a new website</p>
    <p>You will be redirected to the new website <span id="countdown2">in <span id="countdown">12</span> seconds</span>.</p>
    <div id="popupfoot" style="padding-bottom:100px;"> If you wish to stay on the old website, please click <a id="disagree"><b><u>here</u></b></a> 
    </div>
</div>
<div id="mask"></div>

Answer 1

您可以使用 Creative Tools

   <div id="timer"></div>
<script>
    $(document).ready(function(){
        $("#timer").countdown({
            duration    :   30,             // Discount start from defined number (in this case 30 seconds) DEFAULT: 0
            interval    :   1000,           // interval in millisecond (DEFAULT: interval every 1000ms (1 second))
            text_before :   "Redirection begins in exactly ",   // initial text before number (example: Redirection begins in exactly 30), DEFAULT: blank
            text_after  :   "seconds"   // initial text after number (example: 30seconds), DEFAULT: blank
        },
        // callback function when discount stop on 0
        function(){
            this.html("Done counting, redirecting.");
            window.location = "http://www.google.com";
        });
    });
</script>

还有cookie功能:

// Set a session cookie
$.cookie('the_cookie', 'the_value');
$.cookie('the_cookie'); // -> 'the_value'

// Set a cookie that expires in 7 days
$.cookie('the_cookie', 'the_value', { expires: 7 });

// delete the cookie
$.cookie('the_cookie', null);

您可以复制这 2 个函数并与您的代码集成或使用整个创意工具。

您还可以使用本地存储功能，如果存储被禁用或不存在，请使用 cookie:

// Set a session storage
$.storage('the_name', 'the_value');

// Get session storage
$.storage('the_name');

// delete storage
$.storage('the_name', null);