如何添加动画"0到数字"? jQuery的 [英] How can I add the animation "0 to a number"? jQuery

问题描述

我希望当我单击按钮时，div的百分比从0到div的数字非常快. 如何在我的代码中实现动画?

I want that when i click a button, the percentage of the div go very fast from 0 to the number of the div. How can I implement the animation to my code?

JSFiddle: https://jsfiddle.net/252jxsjq/5/

JSFiddle: https://jsfiddle.net/252jxsjq/5/

jQuery:

var counter = localStorage.getItem('rans') || 0;
var counter = Number(localStorage.getItem('rans')) || 0;
var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.redanswer').click(function(){
     localStorage.setItem('rans', ++counter);
     $( '.bpercent' ).html( counter1 * 100 / (counter1+counter) + "%" );
     $( '.rpercent' ).html( counter * 100 / (counter1+counter) + "%" );
     $('.rpercent').animateNumber({ number: 'rans' });


});

var counter1 = localStorage.getItem('bans') || 0;
var counter = Number(localStorage.getItem('rans')) || 0;
var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.blueanswer').click(function(){
     localStorage.setItem('bans', ++counter1);
     $( '.rpercent' ).text( counter * 100 / (counter1+counter) + "%" );
     $( '.bpercent' ).text( counter1 * 100 / (counter1+counter) + "%" );
});

推荐答案

在 CODEPEN ，然后查看由 Enkode 提供的链接. 在这里，我创建了一个自调用循环，循环次数可以达到您指定的最大值，在这种情况下为100.

Check out a working example in CODEPEN, looking in to the link provided by Enkode. Here I created a self-calling loop which can go as much as you specify, 100 in this case.

$(".clickButton").click(function() {
   var counter = 0;
   var timeDelay = 10; // in millisecond
   var endCount= 100;  // end of loop

   (function loopFunc (counter) {
      setTimeout(function () {
         $("p").html(counter + "%");                

         if (counter++ < endCount) loopFunc(counter);   
      }, timeDelay)
    })(1); 
});

将通过单击.clickButton调用循环.然后setTimeout函数在循环迭代中创建一个暂停.

The loop will be invoked by clicking .clickButton. Then a setTimeout function create a pause inside of the loop iteration.

这篇关于如何添加动画"0到数字"? jQuery的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！