Question

我希望根据我的计时器达到＆lt; = 30秒来改变字体的颜色。我使用this countdown plugin作为我的计时器。到目前为止，我能够改变颜色等...但它无论何时添加它等等。我是jQuery的新手，所以任何帮助都表示赞赏！

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

Answer 1

我认为问题是if(seconds2 <= 30) { ... }块只在页面加载时执行一次。

您需要使用onTick回调并检查该处理程序中的剩余时间。

请参阅文档中“回调”标签上的第二个示例：http://keith-wood.name/countdown.html

Answer 2

无论时间如何，它都会添加颜色，因为您只是检查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);
}

根据计时器值添加css

2 个答案: