基於計時器值添加css

我正在尋找基於我的計時器達到< = 30秒更改字體的顏色。我正在使用this countdown plugin作爲我的計時器。到目前爲止，我可以改變顏色等等，但它會隨時添加它，等等。我對jQuery相當陌生，所以任何幫助都會被讚賞！基於計時器值添加css

$(document).ready(function(){ 

    var seconds = $(".time-increment").val(); 

    $("#timer").countdown({ 
     until: +seconds, 
     format: 'MS', 
     layout: '{mn} {ml}, <span class="seconds-actual">{sn}</span> {sl} remaining', 
     onExpiry: reload, 
     onTick: checkFont 
     }); 

    function reload() { 
     var id = $("#item-content").attr('class'); 
     $.ajax({ 
      type: 'POST', 
      url: '../modal_content.adam.php', 
      data: 'Qwicksale_id='+id, 
      success: function(msg) { 
       $("#item-content").hide().html(msg).fadeIn('slow'); 
      } 
     }); 
    } 

});

修訂

我增加了一個功能，爲onTick - 的風格類是紅色的時候，不只是當秒小於或等於30？

function checkFont(seconds2) { 
     if(seconds2[5] == 0 && seconds2[6] <= '30') { 
      $('.hasCountdown').css('color', 'red'); 
     } 
    }

來源

2013-08-05 Alpinestar22

你能告訴你的HTML？具體在哪裏'class =「seconds-actual」'。 – putvande

你可以簡單地使用'until：seconds'不需要'+'那裏...... –

「.seconds-actual」是由倒計時插件添加的。 {sn}標記是它顯示的數字 - 我似乎能夠獲取該值，但無法對我的情況正確地進行測試？ – Alpinestar22

我相信問題是if(seconds2 <= 30) { ... }塊只會在頁面加載時執行一次。

您需要使用onTick回調並檢查該處理程序中的剩餘時間。

見第二個例子中的「回調」選項卡上的文檔：http://keith-wood.name/countdown.html

來源

2013-08-05 18:09:37

我相信這是做到這一點的正確方法。它看起來像是讀取.seconds-actual的值的問題...我的情況似乎是什麼不工作？ – Alpinestar22

如果您查看文檔，您可以看到剩餘時間傳遞給'onTick'處理程序。我會用它來檢查剩餘時間，而不是試圖從DOM中讀取它。 –

偉大的建議，我現在正在測試處理程序傳遞回來..雖然我仍然很難讀取值。無論剩下多少時間，我似乎都會讓整個班級變紅。 – Alpinestar22

它添加顏色不分時間，因爲你只是檢查if(seconds2 <= 30)on page load然後改變顏色，如果不分時間條件爲真...

您可能要檢查這裏面的success功能，像這樣：

function reload() { 
    var id = $("#item-content").attr('class'); 
    $.ajax({ 
     type: 'POST', 
     url: '../modal_content.adam.php', 
     data: 'Qwicksale_id='+id, 
     success: function(msg) { 
      $("#item-content").hide().html(msg).fadeIn('slow'); 
      if(seconds2 <= 30) { 
       $('.hasCountdown').css('color', 'red'); 
      } 
     } 
    }); 
}`

你可能想嘗試

if(seconds2 <= 30) { 
    setTimeout(function() { 
     $('.hasCountdown').css('color', 'red'); 
    }, seconds2); 
}

來源

2013-08-05 18:07:05

基於計時器值添加css

回答

相關問題