您如何创建一个用于检查整数或小数的jQuery数字计数器? [处于保留状态]

问题描述 投票:-3回答:1

如何使用data属性创建一个jquery计数器,该属性检查值是整数还是十进制数?

javascript jquery
1个回答
0
投票

这是您可以做的。。

HTML

<div><span class="count" data-number="50.50">0</span></div>
<div><span class="count" data-number="100">0</span></div>
<div><span class="count" data-number="10">0</span></div>

jQuery

jQuery(function($) {
            $('.count').each(function () {
              var $numberValue = $(this).data('number');

              // If Number is a whole number do this..
              if($numberValue == Math.floor($numberValue)) {
                $(this).prop('Counter', 0).animate({
                  Counter: $(this).data('number')
                }, {
                  duration: 1000,
                  easing: 'swing',
                  step: function(now) {
                    $(this).text(Math.ceil(now).toLocaleString('en'));
                  }
                });
              }

              // If Number is a decimal number do this..
              else {
                $(this).prop('Counter', 0).animate({
                  Counter: $(this).data('number')
                }, {
                  duration: 1000,
                  easing: 'swing',
                  step: function(now) {
                   $(this).text(this.Counter.toFixed(1)); 
                  }
                });
              }

            });
          });
© www.soinside.com 2019 - 2024. All rights reserved.