我如何在我的页面上快速计数从0到60加载？

Question

我想象一个快速里程计数器样式元素，类似于this网站上的旋转数字（向下滚动一点），但数字从零旋转到60，或者可能是0，向上到100，重新设定为0，然后重新设定为60，然后向同一方向旋转。

以下是静态页面的图片供参考：http://d.pr/i/F1rc

这是我想在页面加载时设置动画的中间位置。

感谢您的帮助

Answer 1

你可以纯粹在CSS＆amp; HTML，但绝对不是一个明智的选择，使用JS可以更好，更有效地完成。

Example FIDDLE

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.circle {
  background: red;
  border-radius: 999px;
  display: inline-block;
  height: 150px;
  padding: 100px 0 0 20px;
  width: 230px;
  color: white;
  font-size: 50px;
  font-family: verdana;
  font-weight: bold;
}
.counter {
  height: 50px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  text-align: center;
}
ul {
  -webkit-animation: counter 4s infinite;
  -moz-animation: counter 4s infinite;
  animation: counter 4s infinite;
  position: relative;
}
@-webkit-keyframes counter {
  0% {
    top: 0;
  }
  10% {
    top: -50px;
  }
  20% {
    top: -100px;
  }
  30% {
    top: -150px;
  }
  40% {
    top: -200px;
  }
  50% {
    top: -250px;
  }
  60% {
    top: -300px;
  }
  70% {
    top: -350px;
  }
  80% {
    top: -400px;
  }
  90% {
    top: -450px;
  }
  100% {
    top: 0px;
  }
}
@-moz-keyframes counter {
  0% {
    top: 0;
  }
  10% {
    top: -50px;
  }
  20% {
    top: -100px;
  }
  30% {
    top: -150px;
  }
  40% {
    top: -200px;
  }
  50% {
    top: -250px;
  }
  60% {
    top: -300px;
  }
  70% {
    top: -350px;
  }
  80% {
    top: -400px;
  }
  90% {
    top: -450px;
  }
  100% {
    top: 0px;
  }
}
@keyframes counter {
  0% {
    top: 0;
  }
  10% {
    top: -50px;
  }
  20% {
    top: -100px;
  }
  30% {
    top: -150px;
  }
  40% {
    top: -200px;
  }
  50% {
    top: -250px;
  }
  60% {
    top: -300px;
  }
  70% {
    top: -350px;
  }
  80% {
    top: -400px;
  }
  90% {
    top: -450px;
  }
  100% {
    top: 0px;
  }
}

<div class='circle'>
  +
  <div class='counter'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>%
</div>

Answer 2

插件怎么样：

$.fn.count = function(speed) {
    return this.each(function(_, elem) {
        var from = parseInt($(elem).data('from') || 0, 10),
            to   = parseInt($(elem).data('to') || 100, 10);

        $(elem).text(from);

        (function run(from, to) {
            $(elem).text(parseInt(from, 10)+1);
            if (from < to-1) setTimeout(function() {run(++from, to)}, speed || 300)
        })(from, to);
    });
}

可以很容易地用作

$(element).count(100);

以及您将值设置为

的位置

<div data-from="0" data-to="100">0</div>

FIDDLE

Answer 3

也许您可能想要使用javascripts setTimeout。

以下是您的号码容器：

<div id="number"></div>

一个狂野的伪类：

//Some iterator pseudo-class
function NumberIterator() {
    //The number to start with
    this.number = 0;
    //List of numbers to pass through
    this.goals = [];
    //Private - current goal
    var currentGoal = 0;
    //Whether to infinitelly loop around
    this.infinite = false;
    //Pause between changing number
    this.delay = 50;

    //Timeout ID 
    var t_id = null;
    //Self-reference
    var _this = this;
    //Is running or not
    var running = false;

    //This method will be called automatically
    this.step = function() {
        //If out goal is smaller than number decrease it
        if(this.number>this.goals[currentGoal])
          this.number--;
        //if our goal is larger, increase
        else if(this.number<this.goals[currentGoal])
          this.number++;
        //If equals, perform ongoal actions
        else {
          currentGoal++;
          if(currentGoal>=this.goals.length) {
              if(this.infinite)
                 currentGoal = 0;
              else {
                  this.stop();
              }
              if(typeof this.ongoal == "function")
                 this.ongoal(this.number);
          }
        }



        if(typeof this.onstep == "function")
            this.onstep(this.number);

        if(running) {
            tick();
        }

    }
    this.stop = function() {
        if(t_id!=null) {
            clearTimeout(t_id);
            t_id = null;
        }
        running = false;
    }

    //Start counter with this:
    this.start = function() {
        this.stop();
        running = true;
        this.step();
    }
    //This one is heart of the program. It delays between iterations
    function tick() {
        if(t_id!=null) {
            clearTimeout(t_id);
            t_id = null;
        }
        if(running)
          t_id = setTimeout(function() {_this.step();}, _this.delay);
    }
}

用法：

//Save div element reference (it's faster to use reference than function call)
var div = document.getElementById("number");

//Set up ne instance of that class
var iterator = new NumberIterator();
//Configure waypoints
iterator.goals = [100,60,0,60];
//Set it to iterate indefinitely through waypoins (that's quite fun)
iterator.infinite = true;
//On step callback
iterator.onstep = function(num) {
    div.innerHTML = num;
}
//Start the thingy
iterator.start();

EXAMPLE on jsfiddle

如果数字动画应该是静态的超时，我也可以使用GIF动画（这些也可以是一次性动画）。所以，如果它总是相同的，选择你最喜欢的gif动画师并将其创建为图像。它必须在客户端缓存。

Answer 4

 $(function() {
        function count($this){
            var current = parseInt($this.html(), 10);
            $this.html(++current);
            if(current !== $this.data('count')){
                setTimeout(function(){count($this)}, 50);
            }
        }        
      $("span").each(function() {
          $(this).data('count', parseInt($(this).html(), 10));
          $(this).html('0');
          count($(this));
      });
    });

http://jsfiddle.net/WpJxn/1/