Javascript 倒计时关闭的灯箱

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

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

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");
    });
});

JsFiddle：

---

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

只是一个建议，试着使用jsbin而不是JSFIDLE。您的小提琴在jsbin上比在jsfiddle上工作得更好

无论如何，在

closeLightbox

中，您正在执行

$（'#lightbox'）.empty（）

将删除所有子项，但保留父项。意思是在清除lightbox之后，仍然有一个id为lightbox的div

第二次调用

lightbox

时，条件

$（“#lightbox”）.size（）==0

的计算结果为false，因为元素已经存在

要解决此问题，请替换行

$（'#lightbox'）.empty（）与
$（'#lightbox'）。删除（）

代码的第二个问题是如何调用
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:

//显示灯箱
功能灯箱（插入内容）{
//jQuery包装器（可选，仅用于兼容性）
（函数（$）{
//添加灯箱/阴影（如果以前未添加）
如果（$（'#lightbox'）.size（）==0）{
var theLightbox=$（''）；
变量阴影=$（''）；
变量倒计时=$（''）；
$（阴影）。单击（函数（e）{
closeLightbox（）；
});
$（'body'）。追加（阴影）；
$（'body'）。追加（lightbox）；
$（'body'）。追加（倒计时）；
}
//插入HTML内容
if（insertContent！==null）{
$（'#lightbox'）.html（insertContent）；
$（'灯箱'）。角落（“15px”）；
//永远持续
$（'#lightbox'）。追加（倒计时）；
创建计时器（3）；
}
//将灯箱移至当前窗口顶部+100px
$（'#lightbox'）.css（'top'，$（window.scrollTop（）+100+'px'）；
$（'#lightbox shadow'）.css（'top'，$（window.scrollTop（））；
//$（'#倒计时'）.css（'top'，$（window.scrollTop（）+150+“px”）；
//显示灯箱
$（“#lightbox”）.show（）；
$（“#灯箱阴影”）.show（）；
$（“#倒计时”）.show（）；
})（jQuery）；//结束jQuery包装器
}
函数CreateTimer（Tiempo）{
TotalSeconds=Tiempo；
UpdateTimer（）；
setTimeout（“Tick（）”，1000）；
}
函数Tick（）{
如果（TotalSeconds你好，Amith，谢谢你的回答，我更改了它，但仍然不能正常工作。它第一次运行正常，但之后变得疯狂，我用setTimeout更改了setInterval，现在浏览器没有卡住。我想我在倒计时功能中出错了。很高兴你找到了解决方案。我应该注意到
CountDow中的错误n
在第一次尝试中。无论如何，我已经更新了我的答案，解释了您以前的代码有什么问题，并提供了一个可能的解决方案。请告诉我这是否为您解决了问题。
#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;
}

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);
}

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);
}

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

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

        setTimeout(function () { 
            CountDown(tiempo);
        }, 1000);
    }
}

// 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

}