Question

所以，我想为我正在开发的主题制作事实。我决定和Countup.js一起去。我正确地加载了我的Index.html和everthyinh并尝试执行基本功能，但它显示在Chrome中的开发者控制台中没有定义CountUp。这是错误。未捕获的ReferenceError：未定义countUp 在custom.js：9 （匿名）@ custom.js：9

我的js代码---

 var numAmin = new CountUp("counter1", 0, 500);
 numAmin.start();

我的HTML代码---

 <i class="fa fa-desktop fa-5x fa-inverse targetone" id="counter1"></i>

Answer 1

确保在countup.js之前放置jquery并在文档加载后运行脚本。

并将class =“countupthis”和属性numx =“”添加到您想要计算的所有元素中。

将numx属性设置为您要计数的数字。

.facthold {text-align:center; display:inline-block; border:1px solid black; padding:10px;}

<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="facthold"><i class="fa fa-desktop fa-3" aria-hidden="true"></i><br>
  <span class="countupthis" numx="28">2</span><div>Desktop users</div>
  </div>
<div class="facthold"><i class="fa fa-mobile fa-2" aria-hidden="true"></i><br>
  <span class="countupthis" numx="70">23</span><div>Mobile users</div>
  </div>


  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.2/countUp.min.js'></script>
  <script>
    $(document).ready(function() {
      var options = {  
        useEasing: true,
          useGrouping: true,
          separator: ',',
          decimal: '.',
          prefix: '',
          suffix: ''
      };
      $('.countupthis').each(function() {
        var num = $(this).attr('numx'); //end count
        var nuen = $(this).text();
        if (nuen === "") {
          nuen = 0;
        }
        var counts = new CountUp(this, nuen, num, 0, 1.5, options);
        counts.start();
      });


    });
  </script>
</body>

使用事实计数器库Countup.js时出错？

1 个答案: