0

我正在使用 jQuery 创建一个计数器时钟。这是我的代码

function timer(element) {
    var interval = 1;
    var timer_day1 = 0;
    var timer_day2 = 0;
    var timer_hour1 = 0;
    var timer_hour2 = 0;
    var timer_min1 = 0;
    var timer_min2 = 0;
    var timer_sec1 = 0;
    var timer_sec2 = 0;
    var timer_day_text = 0;
    var timer_hour_text = 0;
    var timer_min_text = 0;
    var timer_sec_text = 0;
    var timer_text = 0;
    $('<div id="div_append_timer">').appendTo("#" + element);
    $('#div_append_timer').append('<label id="lbl_timer_hour2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_hour1" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_min2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_min1" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label class="lbl_semi_class">:</label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_sec2" class="timer_class"></label>');
    $('#div_append_timer').append('&nbsp;&nbsp;');
    $('#div_append_timer').append('<label id="lbl_timer_sec1" class="timer_class"></label>');

    setInterval(function () {
        timer_sec1 = timer_sec1 + interval;
        if (parseInt(timer_sec1) > 9) {
            timer_sec2 = parseInt(timer_sec2 + 1);
            timer_sec1 = 0;
        }
        if (parseInt(timer_sec2) > 5) {
            timer_min1 = parseInt(timer_min1) + 1;
            timer_sec2 = 0;
        }
        if (parseInt(timer_min1) > 9) {
            timer_min2 = parseInt(timer_min2) + 1;
            timer_min1 = 0;
        }
        if (parseInt(timer_min2) > 5) {
            timer_hour1 = parseInt(timer_hour1) + 1;
            timer_min2 = 0;
        }
        if (parseInt(timer_hour1) > 9) {
            timer_hour2 = parseInt(timer_hour2) + 1;
            timer_hour1 = 0;
        }
        if (parseInt(timer_hour2) > 5) {
            timer_day1 = parseInt(timer_day1) + 1;
            timer_hour2 = 0;
        }
        timer_text = timer_hour2 + timer_hour1 + ":" + timer_min2 + timer_min1 + ":" + timer_sec2 + timer_sec1;
        $('#lbl_timer_hour2').text(timer_hour2);
        $('#lbl_timer_hour1').text(timer_hour1);
        $('#lbl_timer_min2').text(timer_min2);
        $('#lbl_timer_min1').text(timer_min1);
        $('#lbl_timer_sec2').text(timer_sec2);
        $('#lbl_timer_sec1').text(timer_sec1);
    }, 1000);
}

我想在其值更改时为类 timer_class 的标签设置动画。我尝试了 .animate() 函数但没有成功。我希望标签从顶部开始制作动画我该怎么做。

这是jsfiddle链接

4

1 回答 1

1

你没有说你想到了什么样的动画，但一般来说，这样做的一种方法是编写你自己的小插件，你可以调用它而不是.text()你现在使用的方法：

(function ( $ ) { 
    $.fn.textChangeAnimate = function(val) {
        val = "" + val;  // ensure val is a string
        return this.each(function() {
            var $el = $(this);
            if (val == $el.text()) return;      // Value unchanged, so return.

            $el.slideUp("fast", function() {    // Otherwise substitute the
                $el.text(val);                  // desired animation
            }).slideDown("fast");               // here.
        });
    };
}( jQuery ));

然后使用：

$('#lbl_timer_sec1').textChangeAnimate(timer_sec1);
// instead of
$('#lbl_timer_sec1').text(timer_sec1);

演示：http: //jsfiddle.net/YP7Tz/1/

我在上面（以及演示小提琴中）包含的动画只是我想到的第一个狡猾的想法，它看起来不太正确，但它应该让您了解如何执行此操作，以检查何时值发生变化并应用某种动画。

顺便说一句，我现在没有时间对您现有的代码进行全面的批评，但我会提到您不需要parseInt()像现在一样在任何地方使用，因为您使用它的所有值已经数字。

于 2013-09-15T12:35:09.127 回答