number-count-tool

轻量级 字符 / 数字滚动动画 浏览器插件，使用 Rollup 构建，可通过 npm 安装与维护。

特性

• 数字计数器、自定义字符集滚动（类似翻牌 / 卷轴效果）
• 支持 ESM / CJS / UMD（CDN）三种产物
• TypeScript 类型声明开箱即用
• 可配置时长、缓动、方向、循环圈数、列错峰（stagger）

安装

npm install number-count-tool

快速使用

<link rel="stylesheet" href="node_modules/number-count-tool/dist/style.css" />
<div id="counter">0</div>

import { createCharScroll, animateNumber } from 'number-count-tool';
import 'number-count-tool/style.css';

const scroll = createCharScroll('#counter', {
  text: '0123',
  duration: 1200,
  loops: 1,
  stagger: 60,
});

await scroll.setText('9876');

// 数字从 → 到 的便捷写法
animateNumber('#counter', 0, 1280, { length: 4, padChar: '0' });

CDN（UMD）

<link rel="stylesheet" href="https://unpkg.com/number-count-tool/dist/style.css" />
<script src="https://unpkg.com/number-count-tool/dist/index.min.js"></script>
<script>
  const { createCharScroll } = NumberCountTool;
  createCharScroll('#counter', { text: '100' }).setText('999');
</script>

API

createCharScroll(target, options?)

| 选项 | 类型 | 默认 | 说明 | |------|------|------|------| | text | string | '0' | 初始文本 | | charset | string | '0123456789' | 每列可用字符 | | duration | number | 1200 | 动画时长（ms） | | easing | string | cubic-bezier(...) | CSS 缓动 | | direction | 'up' \| 'down' | 'up' | 滚动方向 | | loops | number | 1 | 落地前额外整圈 | | stagger | number | 60 | 列间延迟（ms） | | padChar | string | ' ' | 左侧补位字符 | | length | number | — | 固定列数 | | className | string | '' | 额外 class |

返回实例：

• setText(text, options?) → Promise<void>
• getText() → string
• refresh() / destroy()
• el → 根 DOM

animateNumber(target, from, to, options?)

数字专用封装，内部调用 createCharScroll。

开发与构建（Rollup）

npm install
npm run build      # 产出 dist：esm / cjs / umd / min / css / d.ts
npm run dev        # watch 模式
npm run demo       # 构建并启动 demo（5173）

产物：

dist/
  index.js        # ESM
  index.cjs       # CommonJS
  index.umd.js    # UMD
  index.min.js    # UMD 压缩版
  index.d.ts      # 类型
  style.css       # 样式

发布到 npm

1. 确认包名未被占用，必要时改为 @your-scope/number-count-tool
2. 登录并检查打包内容：

npm login
npm pack --dry-run

3. 发布：

npm publish
# 作用域包首次：
npm publish --access public

4. 后续版本：

npm version patch|minor|major
npm publish

prepublishOnly 会在发布前自动执行 npm run build。

License

MIT