📌  相关文章
📜  countTo 添加逗号到数字 jquery - Javascript (1)

📅  最后修改于: 2023-12-03 15:30:06.298000             🧑  作者: Mango

在数字中添加逗号的 jQuery 函数 countTo

简介

countTo 是一个 jQuery 插件，它可以将数字增长到特定的值，并自动对数字添加逗号分隔符。

用法
引入

在页面中引入 jQuery 库和 countTo 插件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
HTML

在 HTML 页面中，添加一个带有类名 "timer" 的 span 元素和一个 data-to 属性包含要定时的数字。

<span class="timer" data-to="50000">0</span>
javascript

使用如下代码来启动 countTo：

$('.timer').countTo();
可选参数

使用以下可选参数来自定义 countTo：

| 参数 | 描述 | | --- | --- | | from | 要开始计时的数字。 默认值：0 | | to | 要计时的数字。 默认值：data-to 属性 | | speed | 数字递增速度（毫秒）。 默认值：1000 | | refreshInterval | 计时器刷新速度（毫秒）。 默认值：100 | | onComplete | 计时结束时要执行的回调函数。 | | formatter | 自定义数字格式化函数。 |

示例

以下是一个完整的示例，其中 countTo 插件已经被引入。

<!DOCTYPE html>
<html>
<head>
  <title>countTo 示例</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countto/1.2.0/jquery.countTo.min.js"></script>
</head>
<body>
  <h1>countTo 示例</h1>
  <p>这是一个无序列表，每个列表项从 0 到指定值递增。</p>
  <ul>
    <li><span class="timer" data-to="50000">0</span></li>
    <li><span class="timer" data-to="100000">0</span></li>
    <li><span class="timer" data-to="200000">0</span></li>
  </ul>

  <script>
  $(document).ready(function() {
    $('.timer').countTo({
      speed: 1000,
      refreshInterval: 100,
      formatter: function (value, options) {
          return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
      }
    });
  });
  </script>
</body>
</html>
总结

countTo 是一个方便的 jQuery 插件，可以快速地为数字添加逗号分隔符。使用时只需引入库和实例化即可开始使用。可选参数可以自定义数字格式和计时器速度等选项。

// 代码片段：
$('.timer').countTo({
    speed: 1000,
    refreshInterval: 100,
    formatter: function (value, options) {
        return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
    }
});