插件 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’)。

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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了