2012-11-01 53 views
0

我想知道我如何能有一個屏幕倒數計時器,當它達到零時,它會刪除特定的DIV。倒數計時器 - 刪除DIV時,達到零

基本上,我設計的是一次性報價的報價頁面,他們必須在一定的時間內對其進行響應,否則它將永遠消失。

我有一個名爲#offer-wrapper的div,下面有一個名爲#offer-timer的div。第二個div中的計時器應該使第一個div從頁面中移除。

可以用得到一個HTML/JS腳本倒計時開始,但是從那裏我迷路了,請大家指教謝謝:)

編輯。還有什麼可以阻止用戶刷新頁面,如果可能?

回答

0

您可以在此使用window.setInterval用一個簡單的功能相結合,更新一個全局變量做什麼,然後jQuery的一個.remove()函數(或者甚至只是設置CSS顯示:無)

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/

+0

謝謝你,我怎麼能有它,因此用戶無法刷新再次看到報價?莫名其妙? – Lewis

+0

根據您的要求,您可能無法使用Cookie。客戶端可以輕鬆清除Cookies。如果您沒有登錄帳戶,那麼您可以考慮通過IP將數據保存在數據庫中......但是,它也易於更改和IP。確保100%同一用戶帳戶不會獲得「優惠」的唯一方法是在計時器到期更新登錄帳戶已經看到該優惠的數據庫時觸發AJAX請求。查看[jQuery Ajax](http://api.jquery.com/jQuery.ajax/) –

0

$(文件)。就緒(函數(){

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

}); 
+0

謝謝,我該如何擁有它,以便用戶無法刷新以再次查看該優惠?莫名其妙? – Lewis

+0

您也可以將您的計時器代碼放在window.location.reload()中。我想它會起作用。不過,不要相信! – user1535967

+0

對不起,我有非常有限的JavaScript知識。你能否說一說嗎? – Lewis