Javascript 为什么jquery中的计数器功能不起作用？

您好，我正在尝试为我的网站制作计数器，我不太擅长javascript，所以我想我的javascript有一些错误，你们能帮我写一些代码吗？谢谢你

这是我的头号代码：

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<script type="text/javascript" src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

---

它按预期工作，但为了查看动画，我已将

延迟

从

10

更改为

1

$（文档）.ready（函数（）{
美元（“.counter”）。计数器({
延误：1，
时间：120
});
});

724
工作时间
1200
项目
3123
快乐客户
992
花
hello，所以我尝试将javascript与html分开，结果出现了这个错误script.js:1 Uncaught ReferenceError:$未在script.js:1中定义。这可能是因为jquery没有正确包含在内。检查againFor如果我没有分离java脚本，它将工作。但如果我尝试向下滚动，然后返回计数器部分，它将只计算到我想要的值的一半。例如，我将它设置为700，但它最多只能计算370，如果我尝试将它与script.js分开，它将显示一些错误。没有人可以帮助您编写上述代码。最好再添加一些代码或添加一些对codepen或codesandbox的引用。这样每个人都能正确理解问题并帮助你们。
 <div class="container-fluid padding text-center counter-up">
      <div class="row padding">
        <div class="col-lg 3">
          <div class="counter">724</div>
          <div class="text">Working hours</div>
        </div>

        <div class="col-lg-3">
          <div class="counter">1200</div>
          <div class="text">Projects</div>
        </div>

        <div class="col-lg-3">
          <div class="counter">3123</div>
          <div class="text">Happy Client </div>
        </div>

        <div class="col-lg-3">
          <div class="counter">992</div>
          <div class="text">Flower</div>
        </div>
      </div>
</div>

 $(document).ready(function(){
    $(".counter").counterUp({
        delay: 10,
        time: 120
    });
});