1

我的问题是我第一次看到计时器下降，但在那之后它变得很奇怪，最后浏览器崩溃了。

我把给我错误的代码放在这里，这是一个巨大的东西，所以我不能把它全部放在这里。

JavaScript：

// display the lightbox
function lightbox(insertContent) {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {
        // add lightbox/shadow <div/>'s if not previously added
        if ($('#lightbox').size() === 0) {
            var theLightbox = $('<div id="lightbox"/>');
            var theShadow = $('<div id="lightbox-shadow"/>');
            var countDown = $('<div class="countDown"/>');
            $(theShadow).click(function(e) {
                closeLightbox();
            });
            $('body').append(theShadow);
            $('body').append(theLightbox);
            $('body').append(countDown);
        }

        // insert HTML content
        if (insertContent !== null) {
            $('#lightbox').html(insertContent);
            $('#lightbox').corner("15px");

            // ALWAYS LAST
            //$('#lightbox').append(countDown);
            CountDown(5);
        }

        // move the lightbox to the current window top + 100px
        $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
        $('#lightbox-shadow').css('top', $(window).scrollTop());
        $('.countDown').css('top', $(window).scrollTop() + 150 + "px");

        // display the lightbox
        $('#lightbox').show();
        $('#lightbox-shadow').show();
        $('.countDown').show();

    })(jQuery); // end jQuery wrapper
}

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }
    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

// close the lightbox


function closeLightbox() {

    // jQuery wrapper (optional, for compatibility only)
    (function($) {

        // hide lightbox/shadow <div/>'s
        $('#lightbox').hide();
        $('#lightbox-shadow').hide();
        $('.countDown').hide();

        // remove contents of lightbox in case a video or other content is actively playing
        $('#lightbox').empty();

    })(jQuery); // end jQuery wrapper
};

$(document).ready(function() {
    $("#Login").click(function(event) {
        event.preventDefault();
        lightbox("Username Not Available");
        $("#lightbox").css("color", "#FF0000");
    });
});

HTML：

<input type="button" id="Login" value="Hello">

CSS：

#lightbox {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1001;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px #000;
}
#lightbox-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    filter: alpha(opacity=90);
    -moz-opacity: 0.90;
    -khtml-opacity: 0.90;
    opacity: 0.90;
    z-index: 1000;
    display: none;
}

.countDown {
    position: absolute;
    width: 50%;
    left: 25%;
    background: #fff;
    z-index: 1002;
    display: none;

    color: #069;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-variant: small-caps;
    font-weight: normal;
    margin: 10px auto;
    display: none;
}

JsFiddle：

http://jsfiddle.net/c2gx9/6/

不知道为什么它在 jsfiddle 上不起作用；它在我的电脑上运行良好。

4

2 回答 2

2

只是一个建议，尝试使用 jsbin 而不是 jsfiddle。您的小提琴在 jsbin 上比在 jsfiddle 上效果更好。

无论如何，在closeLightbox你正在执行$('#lightbox').empty();这将删除所有孩子，但让父母留下。意思是清除灯箱后，还有一个id为灯箱的div。

第二次lightbox调用 your 时，条件$('#lightbox').size() === 0评估为 false，因为元素已经存在。

要解决此问题，请将行替换$('#lightbox').empty();为$('#lightbox').remove();

代码的第二个问题是您正在调用的方式setInterval。

function CountDown(tiempo) {
    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    var IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

js引擎将代码翻译成这样

function CountDown(tiempo) {
    var IntervalID;

    if (tiempo <= 0) {
        clearInterval(IntervalID);
        closeLightbox();
    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;
    }

    IntervalID = setInterval("CountDown(" + tiempo + ")", 1000);
}

IntervalID是函数的局部变量。每次调用函数时，都会从头开始创建变量。所以实际上，你永远不会清除间隔。您只是在减少tiempo变量。

“浏览器发疯”的一个可能原因是只执行setInterval一次将重复调用指定的函数直到显式停止。在您的倒计时中，超过 5 次迭代，您调用了setInterval5 次。您可以想象，经过几次尝试后，浏览器会因为所有这些同时运行的CountDown.

将来如果您想使用setInterval，您可能需要阅读 MDN 上的文档。该站点是一个非常好的 HTML、JS 和 CSS 资源。

最后，您将函数名称作为字符串参数传递给setInterval. 由于各种原因，它有点不受欢迎。我选择不这样做的原因是代码只有在函数可全局访问时才能工作。为了封装和不污染全局命名空间，人们推荐其他方法。

回到如何解决这个问题，我应该setInterval第一次注意到这个错误。我没有，那是我的错。您找到了适合您的解决方案。为了完整起见，我将包括我会如何要求您修复它。

function CountDown(tiempo) {
    if (tiempo <= 0) {
        closeLightbox();

    } else {
        $(".countDown").html("Esta ventana se cerrará en " + tiempo + " segundos");
        tiempo--;

        setTimeout(function () { 
            CountDown(tiempo);
        }, 1000);
    }
}
于 2012-11-24T18:18:08.480 回答
0

在网上找到了一些代码，它终于可以工作了，我现在使用的代码是：

JS：

// display the lightbox
function lightbox(insertContent){

    // jQuery wrapper (optional, for compatibility only)
    (function($) {
        // add lightbox/shadow <div/>'s if not previously added
        if($('#lightbox').size() === 0){
            var theLightbox = $('<div id="lightbox"/>');
            var theShadow = $('<div id="lightbox-shadow"/>');
            var countDown = $('<div id="countDown"/>');
            $(theShadow).click(function(e){
                closeLightbox();
            });
            $('body').append(theShadow);
            $('body').append(theLightbox);
            $('body').append(countDown);
        }

        // insert HTML content
        if(insertContent !== null){
            $('#lightbox').html(insertContent);
            $('#lightbox').corner("15px");

            // ALWAYS LAST
            $('#lightbox').append(countDown);
            CreateTimer(3);
        }

        // move the lightbox to the current window top + 100px
        $('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');
        $('#lightbox-shadow').css('top', $(window).scrollTop());
        //$('#countDown').css('top', $(window).scrollTop() + 150 + "px");

        // display the lightbox
        $('#lightbox').show();
        $('#lightbox-shadow').show();
        $('#countDown').show();

    })(jQuery); // end jQuery wrapper

}

function CreateTimer(Tiempo) {
    TotalSeconds = Tiempo;

    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function Tick() {
    if (TotalSeconds <= 1) {
        closeLightbox();
        return;
    }

    TotalSeconds -= 1;
    UpdateTimer();
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {
    $('#countDown').html("Esta ventana se cerrará en " + TotalSeconds + " segundos");
}

// close the lightbox
function closeLightbox(){

    // jQuery wrapper (optional, for compatibility only)
    (function($) {

        // hide lightbox/shadow <div/>'s
        $('#lightbox').remove();
        $('#lightbox-shadow').remove();
        $('#countDown').remove();

        // remove contents of lightbox in case a video or other content is actively playing


    })(jQuery); // end jQuery wrapper

}
于 2012-11-27T01:39:28.840 回答