Javascript 在Yii2上使用lib CountUp.js

如何在Yii2中正确使用CountUp.js库？ 我已经在AppAsset中添加了它，并在视图中正确加载了它，现在我将分配lib的使用以及在同一视图中显示的一个数字

AppAsset.php

---

有人能给我一个在视图中使用的例子吗？

如果您正在使用countUp.js库的javascript版本，您需要创建CountUptarget、startVal、endVal、小数、duration和带有配置参数的选项的新实例，然后调用instance.start；启动计数器

参数： target=html元素、输入、svg文本元素的id，或之前选择的元素/输入的变量（在计算时） startVal=要开始的值 endVal=要达到的值 小数=数字中的可选小数位数，默认为0 持续时间=可选持续时间（秒），默认值为2 选项=可选，请参见演示格式设置/放松选项对象 我假设您已经注册了上述AppAsset类，并且加载了源库，否则请取消注释下面视图顶部countUp.js的CDN链接，复制下面的视图并运行它

<?php
    use yii\web\View;

    //$this->registerJsFile('//cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js');

    $js = <<<JS
    var options = {
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
    };
    var demo = new CountUp('counter', 0, 5220, 0, 2.5, options);
    if (!demo.error) {
      demo.start();
    } else {
      console.error(demo.error);
    }
JS;
    $this->registerJs($js, View::POS_END);

?>

<div id="counter">

</div>

---

我实例化了错误的倒计时，除了我下载的.js文件有一些错误之外，我使用了CountUp.min.js并正确地给出了它。谢谢你教我如何正确使用它^

<?php
    use yii\web\View;

    //$this->registerJsFile('//cdn.jsdelivr.net/npm/countup@1.8.2/dist/countUp.min.js');

    $js = <<<JS
    var options = {
      useEasing: true,
      useGrouping: true,
      separator: ',',
      decimal: '.',
    };
    var demo = new CountUp('counter', 0, 5220, 0, 2.5, options);
    if (!demo.error) {
      demo.start();
    } else {
      console.error(demo.error);
    }
JS;
    $this->registerJs($js, View::POS_END);

?>

<div id="counter">

</div>