Question

我们在数字计数的脚本上制作，但是问题是当我们刷新并且到达页码计数开始但是当任何人去那个数字或点时那么数字计数开始。

定制CSS： -

.office{padding-right: 5px; padding-left: 5px;}
.office div{margin-bottom:5px;}
.office i {margin-right:0px;}
.office i img{width: 35px; height: 35px;}
.office div span{ font-size: 36px; position: relative; top: 10px;}
.office p{ font-size: 13px; margin:0; padding:0;}

JS： -

$(document).ready(function () {
$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
});

HTML： -

<div class="row">
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <div class="col-md-12 m-b-xm">
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/office-ico.jpg" alt=""></i>
    <span class="count">10</span>
  </div>
  <p>Offices Worldwide</p>
</div>
<div class="col-xs-4 office">
  <div>
    <i><img src="images/hard-ico.jpg" alt=""></i>
    <span class="count" data-speed="1000">180</span>
  </div>
  <p>Hardworking People</p>
</div>
<div class="col-xs-4 office">
  <div>
    <i><img src="images/coun-ico.jpg" alt=""></i>
    <span class="count">06</span>
  </div>
  <p>Countries Covered</p>
</div>
<div class="clearfix"></div>
  </div>
</div>

请检查完整工作代码的链接： - Jsfiddle

Answer 1

我已经改变了你的代码。检查此fiddle

使用像这样的数据属性

Allow USB debugging

我们可以跟踪计数然后递增它。

Answer 2

<div class="row">

  <div id="startcount"class="col-md-12 m-b-xm">
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/office-ico.jpg" alt=""></i>
        <span class="count">10</span>
      </div>
      <p>Offices Worldwide</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/hard-ico.jpg" alt=""></i>
        <span class="count" data-speed="1000">180</span>
      </div>
      <p>Hardworking People</p>
    </div>
    <div class="col-xs-4 office">
      <div>
        <i><img src="images/coun-ico.jpg" alt=""></i>
        <span class="count">06</span>
      </div>
      <p>Countries Covered</p>
    </div>
    <div class="clearfix"></div>
  </div>
</div>

JAVASCRIPT： -

$(document).ready(function () {
document.getElementById("startcount").onmouseover = function() {
 $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });  // code to run when the user hovers over the div
};
});

我认为这可以解决你的问题...

数字计数在我们到达该点时开始

2 个答案: