0

私の投票システムでは、投票率を表示したいと考えています。このパーセンテージは、ajax リクエスト (成功応答) で指定および計算されます。ライブカウンターのアップとバックのようなものを作成したいと思います（投票率が多かれ少なかれ場合）。

たとえば、投票が 40 で、成功応答が 50 を返すとします。カウンターが 40 から 50 までカウントしていることを示したいと思います (アニメーション)。

私はこれを試しました：

<b class="countPercentage">40%</b>

$('.countPercentage').animated().text(data.percentage);

しかし成功しません。値が 40 から 50 に変わるだけです。

前もって感謝します！ニック

4

3 に答える 3

2

自分でカウンターを作成する必要があります。もちろん、量に基づいて、タイミングを調整できますdiff。

JavaScript

var display = $('.countPercentage > span');

var currentValue = parseInt(display.text());
var nextValue    = data.percentage;

var diff         = nextValue - currentValue;
var step         = ( 0 < diff ? 1 : -1 ); 

for (var i = 0; i < Math.abs(diff); ++i) {
    setTimeout(function() {
        currentValue += step
        display.text(currentValue);
    }, 100 * i)   
}

デモ

購入前にお試しください

于 2013-09-27T12:31:29.290 に答える
0

超遅いですが、正方形のスペースに同様のものを使用しました。パーセントではありません。違いを知るにはコーディングについて十分に知りませんが、ここにHTMLがあります

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
var a = 0;
$(window).scroll(function() {

var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
  var $this = $(this),
    countTo = $this.attr('data-count');
  $({
    countNum: $this.text()
  }).animate({
      countNum: countTo
    },
    {
      duration: 2000,
      easing: 'swing',
      step: function() {
        $this.text(Math.floor(this.countNum));
      },
      complete: function() {
        $this.text(this.countNum);
      }
      });
 });
 a = 1;
 }
 });
 </script>
<div id="counter">
 <div class="sqs-col sqs-col-4 counter-value" data-count="58" data-
 desc=>0</div>  
<div class="sqs-col sqs-col-4 counter-value" data-count="42" data-
 desc=>0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="88" data-
desc=>0</div>
</div>


<style>
  .counter-value { 
font-size: 60px;
line-height:2em;
text-align:center;
padding:17px 0;
 }
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.2em;
于 2017-10-22T04:50:22.290 に答える
0

独自のパーセンテージ カウンターを作成する別の方法 ( http://jsfiddle.net/CEbGA/で実際の動作を確認できます):

function timer() {
    if (animator.curPercentage < animator.targetPercentage) {
        animator.curPercentage += 1;    
    } else if (animator.curPercentage > animator.targetPercentage) {
        animator.curPercentage -= 1;    
    }                

    $(animator.outputSelector).text(animator.curPercentage + "%");

    if (animator.curPercentage != animator.targetPercentage) {
        setTimeout(timer, animator.animationSpeed)    
    }
}

function PercentageAnimator() {
    this.animationSpeed = 50;
    this.curPercentage = 0;
    this.targetPercentage = 0;
    this.outputSelector = ".countPercentage";

    this.animate = function(percentage) {
        this.targetPercentage = percentage;
        setTimeout(timer, this.animationSpeed);
    }    
}

var animator = new PercentageAnimator();
animator.curPercentage = 40;
animator.animate(70);
于 2013-09-27T12:59:15.303 に答える