倒数计时器-达到零时删除DIV

Question

我想知道如何在屏幕上设置倒数计时器，当它达到零时，它将删除特定的DIV。

基本上，我正在设计一个报价页面，它是一次性报价，他们必须在一个时间范围内对此做出回应，否则它将永远消失。

我有一个名为＃offer-wrapper的div，在一个名为＃offer-timer的div下面。第二个div中的计时器应导致第一个div从页面中删除。

可以从获取HTML / JS倒计时脚本开始，但是从那里我迷路了，请告知谢谢：）

编辑。还有可能阻止用户刷新页面的事情吗？

Answer 1

您可以使用window.setInterval结合一个简单的函数来更新全局变量，然后再使用jQuery的.remove（）函数（甚至只是将CSS设置为display：none来进行此操作）

var time = 60;

window.setInterval(test, 1000);

function test()
{
    //update time
    time -=1;
    //update the div to show the time
    $('#testDiv').html(time); 

    //hide the div if the time is 0
    if(time == 0)        
    {
        $('#testDiv').remove();
    }
}

jsFiddle =http://jsfiddle.net/9sAce/

Answer 2

$(document).ready(function() {

    jQuery.fn.countDown = function(settings, to) {
        settings = jQuery.extend({
            startFontSize : '40px',
            endFontSize : '12px',
            duration : 1000,
            startNumber : 10,
            endNumber : 0,
            callBack : function() {
            }
        }, settings);
        return this.each(function() {

            if (!to && to != settings.endNumber) {
                to = settings.startNumber;
            }

            // Set the countdown to the starting number
            $(this).text(to).css('fontSize', settings.startFontSize);

            // Loopage
            $(this).animate({
                'fontSize' : settings.endFontSize
            }, settings.duration, '', function() {
                if (to > settings.endNumber + 1) {
                    $(this).css('fontSize', settings.startFontSize).text(to - 1).countDown(settings, to - 1);
                } else {
                    settings.callBack(this);
                }
            });

        });
    };

    $('#countdown').countDown({
        startNumber : 100,
        callBack : function(me) {
            $('#countdown').remove();
            alert("TIME IS OVER!!");
        }
    });

});