VUE----数字增加,兼容小程序

数字增加,兼容小程序

requestAnimationFrame 为浏览器提供的方法

复制代码
export function countUp(duration, from, to, onProgress) {
	let value = from
	const speed = (to - from) / duration
	const start = Date.now()

	if (typeof window === 'undefined') {
		let requestAnimationFrame = (callback) => {
			setTimeout(() => {
				callback(Date.now());
			}, 1000 / 60); // 60为大多数显示器的刷新率
		}
	}

	function _run() {
		const t = Date.now() - start
		if (t >= duration) {
			value = to
			onProgress(value)
			return
		}

		value = from + t * speed
		onProgress(value)
		requestAnimationFrame(_run)
	}

	_run()
}

使用

复制代码
countUp(2000, 0, 200, (val) => {
	console.log(val.toFixed(0))
})
相关推荐
zfoo-framework1 天前
安装pi agent 支持duojie和deepseek
java·服务器·前端
小码哥0681 天前
智慧物业管理系统开发详解:核心功能与源码开发优势
小程序·物业管理·物业系统
l1m0_1 天前
告别反复修改Prompt:AI生成React应用并落地开发的实战复盘
前端·react.js·ui·ai·设计
xexpertS1 天前
前端工程转型实践:从 Ember 迁移到 React,提升构建速度与研发效能
前端·react.js·前端框架
大家的林语冰1 天前
👍 JS 还在进化,ES2026 正式推出,最新七大特性补全!
前端·javascript·json
铁皮饭盒1 天前
DeepSeek V4 Pro 0813发布了, 也可以部署到 Codex 了
前端·javascript·后端
不吃辣4901 天前
vibe coding | 如何做一个 AI 闹钟小程序?
人工智能·小程序·ai编程
夏幻灵1 天前
从语法坑点到 JS 内存底层:Vue 3 watch 侦听器深度全解
开发语言·javascript·vue.js
Sterting1 天前
反馈组件:对话框、消息与通知
前端·javascript·vue.js
breeze jiang1 天前
ESLint flat config 配置实战:五大字段、规则严重级别与 --fix 能力边界详解
开发语言·前端·javascript