Question

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

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

我有一个名为＃offer-wrapper的div，下面是一个名为#grime-timer的div。第二个div中的计时器应该使第一个div从页面中删除。

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

EDIT。还有什么可以阻止用户在可能的情况下刷新页面？

Answer 1

你可以使用window.setInterval结合一个简单的函数来更新一个全局变量然后jQuery的.remove（）函数（甚至只是设置CSS显示：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!!");
        }
    });

});

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

2 个答案: