Question

我的屏幕上有假时钟，时间是：

<div class="time">9:14<sup>am</sup></div>

我想创建一个函数，能够将该时间补间到另一个任意时间，这样，时钟实际上会在几秒钟和几小时内进行，直到它达到新的时间（伪代码）：

var currentTime = {
  time: 9:14am
}
function changeTime(newTime){
  TweenMax.to(currentTime,.5,{
    time: newTime
  });
}

changeTime(12:32pm);

所以在上面的情况中，分钟会上升一，直到它们达到60，然后将小时增加一个并重置为零，然后再增加到60等，直到它们达到12:32（上午下午12点切换到下午。）

有没有办法用tweenmax和时间戳做到这一点？或者我需要构建一个自定义函数？或者是否有更好的方式来补间时间？

Answer 1

You can use something like this (and improve it, I did this quickly).

<script>
        var hour, minute, second, meridian, isAm;
        isAm = true;
        hour = 0;
        minute = 0;
        second = 0;

        function timerLoop () {
            second++;

            if(second > 59) {
                second = 0;
                minute++;
            }

            if(minute > 59) {
                minute = 0;
                hour++;
            }

            if(hour >12) {
                hour = 1;
                isAm = !isAm;
            }

            // update labels
            meridian = 'a.m.';
            if(!isAm) meridian = 'p.m.';
            console.log(hour + ':' + minute + ':' + second + ' ' + meridian);

            setTimeout(function() {
                timerLoop();
            }, 1000);
        }


        timerLoop();
    </script>

I tested it for 2 mins only but the that part was working. You'll probably want to add leading zero's to the single digits as I haven't done that. And once it is running as you want you can look at adding animations or fades to style it a bit better.

如何将时间戳补间到特定时间

1 个答案: