0

画面にカウントダウン タイマーを設定する方法を知りたいです。カウントダウン タイマーがゼロになると、特定の DIV が削除されます。

基本的に、私は 1 回限りのオファーであるオファー ページをデザインしており、時間枠内に応答する必要があります。そうしないと、永遠に消えてしまいます。

#offer-wrapper という div があり、その下に #offer-timer という div があります。2 番目の div のタイマーにより、最初の div がページから削除されます。

HTML/JS カウントダウン スクリプトを取得することから始めることができますが、そこから道に迷ってしまいます。よろしくお願いします :)

編集。また、可能であれば、ユーザーがページを更新するのを止めるものはありますか?

4

2 に答える 2

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

});
于 2012-11-01T03:54:59.637 に答える
0

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>

于 2012-11-01T03:53:01.650 に答える