0

我希望根据我的计时器达到 <= 30 秒来更改字体颜色。我正在使用这个倒计时插件作为我的计时器。到目前为止，我可以更改颜色等...但它会添加它而不管时间等等。我对 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');
        }
    }
4

2 回答 2

2

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

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

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

于 2013-08-05T18:09:37.877 回答
0

无论时间如何，它都会添加颜色，因为您只是在检查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-05T18:07:05.257 回答