阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.countto 中文 API 文档

      插件 jQuery.countto 中文 API 文档

      一个 jQuery 插件,它将以指定的速度向上计数(或向下)到目标数。

      jQuery countTo 插件

      jQuery countTo 是一个 jQuery 插件,它将以指定的速度向上计数(或向下)到目标数字,在 HTML DOM 元素中呈现。

      要求:

      jQuery countTo 需要最新版本的 jQuery。

      用法:

      使用此插件有两种主要方法:通过 DOM 节点上的数据属性,以及通过显式传递给 countTo 函数的 JS 选项。

      这两种方法也可以混合和匹配。数据属性优先于 JS 选项。

      数据属性

      这种方法允许您定义 data-*任何 DOM 元素将作为计数器容器的属性。当您在构建 DOM 时已经知道值时,这非常有用。

      <span class="timer" data-from="25" data-to="75"></span>
      
      <script type="text/javascript">
        $('.timer').countTo();
      </script>
      

      演示所有可能使用的选项的更详细示例如下。

      <span class="timer" data-from="0" data-to="100"
            data-speed="5000" data-refresh-interval="50"></span>
      
      <script type="text/javascript">
        $('.timer').countTo();
      </script>
      

      有关各种可用选项的详细信息,请参阅下面的“ 选项”部分。

      JavaScript 选项

      此方法允许您将值传递给 countTo 函数。当您在呈现 DOM 时不知道值时,这非常有用。

      <span class="timer"></span>
      
      <script type="text/javascript">
        $('.timer').countTo({from: 0, to: 500});
      </script>
      

      演示所有可能使用的选项的更详细示例如下。

      <span class="timer"></span>
      
      <script type="text/javascript">
        $('.timer').countTo({
          from: 50,
          to: 2500,
          speed: 1000,
          refreshInterval: 50,
          formatter: function (value, options) {
            return value.toFixed(options.decimals);
          },
          onUpdate: function (value) {
            console.debug(this);
          },
          onComplete: function (value) {
            console.debug(this);
          }
        });
      </script>
      

      有关各种可用选项的详细信息,请参阅下面的“ 选项”部分。

      选项:

      countTo 下面是可以传递给方法的选项的完整列表。

      选项数据属性描述
      数据从从中开始计数的数字。(默认值:0)
      数据到要停止计数的数字。(默认值:100)
      速度数据速度完成计数所需的毫秒数。 (默认值:1000)
      刷新间隔数据刷新间隔刷新计数器之间等待的毫秒数。 (默认值:100)
      小数点数据小数使用默认格式化程序时显示的小数位数。(默认值:0)
      formatter(值,选项)一种处理程序,用于在呈现给 DOM 之前格式化当前值。真实的当前值和选项集将传递给函数,并在 DOM 元素的上下文中运行。它必须返回格式化的值。(默认值: value.toFixed(options.decimals))
      onUpdate(值)为计数器更新的每次迭代触发的回调函数。当前呈现的值将传递给函数,并在 DOM 元素的上下文中调用。 (默认值:null)
      onComplete(值)计数完成时触发的回调函数。最终渲染的值传递给函数,并在 DOM 元素的上下文中调用。(默认值:null)

      功能:

      此插件还支持功能,主要用于更改状态。通过将名称作为字符串传递给 countTojQuery 函数来调用函数,例如: $('#timer').countTo(‘stop’)。

      开始如果计时器停止,则恢复计时器。
      如果计时器正在运行,则停止(暂停)计时器。
      切换根据当前状态启动或停止计时器。
      重新开始将计时器重新设置为其初始“从”值。
      目录
      目录