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

Question

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

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

我有一个名为#offer-wrapper 的div 和一个名为#offer-timer 的div。第二个 div 中的计时器应该导致第一个 div 从页面中删除。

可以从获取 HTML/JS 倒计时脚本开始，但从那里我迷路了，请指教谢谢 :)

编辑。如果可能的话，还有什么可以阻止用户刷新页面？

Answer 1

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

});

Answer 2

您可以使用 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/ ​</p>