Timered Counter

简体中文

English

简体中文

English

Appearance

快速开始 ​

注意

TimeredCounter 目前有两个可选的依赖项，考虑到它们的体积较大，所以默认情况下不会被安装。你可以根据需要手动安装它们。

  • decimal.js: Decimal.js 提供了近乎无限制的精度，用于处理大数/高精度浮点数计算。如何使用 ->
  • grapheme-splitter: grapheme-splitter 可以正确地分割包含 emoji 的字符串。如何使用 ->

在下方的每种使用方式中，我们都会提供如何安装这两个依赖的方法。

通过 CDN 引入 ​

你可以借助 <script> 标签直接通过 CDN 使用 TimeredCounter：

html
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.global.js"></script>

这里我们使用了 jsdelivr，但你也可以使用任何提供 npm 包服务的 CDN，例如 unpkg 或 cdnjs。当然，你也可以下载此文件并自行提供服务。

通过 CDN 使用 TimeredCounter 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML。

使用全局构建版本 ​

上面的链接使用了全局构建版本的 TimeredCounter，该版本的所有顶层 API 都以属性的形式暴露在了全局的 TimeredCounter 对象上。这里有一个使用全局构建版本的例子：

html
...
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.global.js"></script>

<div style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>

可选依赖 ​

添加 decimal.js 数字适配器

如果你需要使用基于 decimal.js 的数字适配器，请先添加下列 <script> 标签：

html
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.global.js"></script>

然后在你的代码中引入：

javascript
TimeredCounter.TimeredCounterAdapter.registryAdapter(TimeredCounterExternal.DecimalJsNumberAdapter); // 注册适配器
TimeredCounter.TimeredCounterAdapter.setNumberAdapter('decimal.js'); // 设置使用的适配器
添加 grapheme-splitter 字符串适配器

如果你需要使用基于 grapheme-splitter 的字符串适配器，请先安装它：

html
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/grapheme-splitter-string-adapter.global.js"></script>

然后在你的代码中引入：

javascript
TimeredCounter.TimeredCounterAdapter.registryAdapter(TimeredCounterExternal.GraphemeSplitterAdapter); // 注册适配器
TimeredCounter.TimeredCounterAdapter.setNumberAdapter('grapheme-splitter'); // 设置使用的适配器
文件体积
文件名rawgzipbrotlideflate
timered-counter.global.js68.93 kB19.9 kB17.63 kB19.89 kB
decimal-js-number-adapter.global.js33.1 kB13.4 kB11.69 kB13.39 kB
grapheme-splitter-string-adapter.global.js23.87 kB7.8 kB4.92 kB7.79 kB

使用 ES 模块构建版本 ​

在本文档的其余部分我们使用的主要是 ES 模块语法。现代浏览器大多都已原生支持 ES 模块。因此我们可以像这样通过 CDN 以及原生 ES 模块使用 TimeredCounter：

html
...
<script type="module" src="https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js"></script>

<div id="demo" style="font-size: 36px; text-align: center;">
  <timered-counter-string value="123456789" initial-value="0"></timered-counter-string>
</div>

注意我们使用了 <script type="module">，且导入的 CDN URL 指向的是 TimeredCounter 的 ES 模块构建版本。

可选依赖 ​

添加 decimal.js 数字适配器

如果你需要使用基于 decimal.js 的数字适配器，请根据下列代码进行修改：

html
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js"></script> 

<script type="module">
  import { TimeredCounterAdapter } from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js'; 
  import DecimalJsNumberAdapter from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js'; 
  TimeredCounterAdapter.registryAdapter(DecimalJsNumberAdapter); 
  TimeredCounterAdapter.setNumberAdapter('decimal.js'); 
</script>
添加 grapheme-splitter 字符串适配器

如果你需要使用基于 grapheme-splitter 的字符串适配器，请根据下列代码进行修改：

html
<script src="https://cdn.jsdelivr.net/npm/timered-counter/dist/decimal-js-number-adapter.esm-browser.js"></script> 

<script type="module">
  import { TimeredCounterAdapter } from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/timered-counter.esm-browser.js'; 
  import GraphemeSplitterStringAdapter from 'https://cdn.jsdelivr.net/npm/timered-counter/dist/grapheme-splitter-string-adapter.esm-browser.js'; 
  TimeredCounterAdapter.registryAdapter(GraphemeSplitterStringAdapter); 
  TimeredCounterAdapter.setStringAdapter('grapheme-splitter'); 
</script>
文件体积
文件名rawgzipbrotlideflate
timered-counter.esm-browser.js67.51 kB19.79 kB17.56 kB19.78 kB
decimal-js-number-adapter.esm-browser.js32.74 kB13.29 kB11.58 kB13.28 kB
grapheme-splitter-string-adapter.esm-browser.js23.51 kB7.66 kB4.76 kB7.65 kB

通过模块引入 ​

安装 ​

shell
$ npm install timered-counter --save
shell
$ pnpm add timered-counter
shell
$ yarn add timered-counter

引入 ​

javascript
import "timered-counter";

可选依赖 ​

安装 decimal.js 数字适配器

如果你需要使用基于 decimal.js 的数字适配器，请先安装它：

shell
npm install decimal.js --save

然后在你的代码中引入：

javascript
import DecimalJsAdapter from "timered-counter/dist/src/number-adapter/decimal.js";
import { TimeredCounterAdapter } from "timered-counter";

TimeredCounterAdapter.registryAdapter(DecimalJsAdapter); // 注册适配器
TimeredCounterAdapter.setNumberAdapter('decimal.js'); // 设置使用的适配器
安装 grapheme-splitter 字符串适配器

如果你需要使用基于 grapheme-splitter 的字符串适配器，请先安装它：

shell
npm install grapheme-splitter --save

然后在你的代码中引入：

javascript
import GraphemeSplitterAdapter from "timered-counter/dist/src/string-adapter/grapheme-splitter.js";
import { TimeredCounterAdapter } from "timered-counter";

TimeredCounterAdapter.registryAdapter(GraphemeSplitterAdapter); // 注册适配器
TimeredCounterAdapter.setStringAdapter('grapheme-splitter'); // 设置使用的适配器

用法 ​

你只需要更新数值，TimeredCounter 会自动处理剩下的事情。

`TimeredCounter` 是这样的，你只要更新数值就可以，可 `TimeredCounter` 要考虑的事情就很多了。XD

下方这是一个简单的示例，TimeredCounter 会自动响应数字的变化，并且会自动处理数字的增减动画。

快速开始CodeSandbox Logo
html
<timered-counter-number
  id="counter"
  class="font-mono font-bold self-center"
/>
js
let userCount = 1000;
const counter = document.getElementById('counter');
setInterval(() => {
  userCount += Math.floor(Math.random() * 10);
  counter.value = userCount;
}, 1100);
vue
<script setup lang="ts">
import { onMounted } from "vue";
onMounted(() => {
// #region js
  let userCount = 1000;
  const counter = document.getElementById('counter');
  setInterval(() => {
    userCount += Math.floor(Math.random() * 10);
    counter.value = userCount;
  }, 1100);
// #endregion js
});
</script>

<template>
<!-- #region html -->
  <timered-counter-number
    id="counter"
    class="font-mono font-bold self-center"
  />
<!-- #endregion html -->
</template>

<style scoped></style>

下一步 ​

  • 想查看更多 TimeredCounter 的示例？请查看 示例。
  • 要了解 TimeredCounter 的配置参数？请查看 配置和API。
  • 要探索 TimeredCounter 样式和动画更多的可能性，例如实现这样的效果？你可以从 深入 TimeredCounter 开始。