Question

我试图创建增加数字的函数，所以它看起来像数字时钟。该函数将两个时间戳作为参数，并在它们之间递增。但由于hh（小时）的范围小于mm（分钟），因此小时数总是先完成。我希望两人同时完成。

这是我的代码。

    var start =  $('.clock').attr('data-from').split(":"); //eg. 10:23
    var end = $('.clock').attr('data-to').split(":"); //eg 18:38

    var clock = function (start, end, el) {
        if($('.clock').length) {
            var interval = setInterval(function() {
                el.text(start);
                if (start >= end) {
                    clearInterval(interval);
                }
                start++;
            }, 50);
        }

    };

    clock(start[0],end[0],$('.clock .h'));
    clock(start[1],end[1],$('.clock .m'));

那么，我怎样才能让间隔同时完成两个动画呢？

Answer 1

我之前的回答是没有正确地使用“时间来制作动画”而某些值会比其他值更慢，所以我删除了那个并将其简化为：小提琴：https://jsfiddle.net/MarkSchultheiss/67wyzk2m/2/

<强>标记

<div class="container" data-from="01:00" data-to="18:50">
  <span class="h"></span>
  <span>.</span>
  <span class="m"></span>
</div>

新代码：

var clockR = function(start, end, el, timerP) {
  var currentCount = start;
  el.text(currentCount);
  var timer = timerP || 1;
  var interval = setInterval(function() {
    el.text(currentCount);
    if (start >= end) {
      clearInterval(interval);
    }
    currentCount++;
  }, timer);
};
var start = $('.container').attr('data-from').split(":");
var end = $('.container').attr('data-to').split(":");
var animateLength = 30000; // ms to count for
var s0 = end[0] - start[0];
var s1 = end[1] - start[1];
var t0 = Math.abs(Math.trunc(animateLength / s0));
var t1 = Math.abs(Math.trunc(animateLength / s1));

clockR(start[0], end[0], $('.container .h'), t0);
clockR(start[1], end[1], $('.container .m'), t1);

Answer 2

您需要使用他们可以（小时和分钟）划分的数字。

所以假设你想从10:20到12:30，小时差为2，分钟差为10.乘以它们，得到20。

假设您希望所有动画都在100毫秒内完成。

将你的100分为20，你得到5.所以你的间隔是5。将100除以2（小时数）= 50，当总时间间隔的其余部分除以50 = 0时，必须更新小时，因此totalInterval % 50 === 0。分钟相同，100/10 = 10，所以当totalInterval % 10 === 0时，增加你的分钟。

我只是在这里给你指导，轮到你编码;）如果你能在这里发布你的最终解决方案那就太棒了。

调整setInterval的间隔

2 个答案: