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))
})
相关推荐
const_qiu12 分钟前
微信小程序自动化测试100%通过率实践
微信小程序·小程序
结网的兔子18 分钟前
前端学习笔记——Element Plus 栅格布局系统示例
前端·javascript·css
l1t36 分钟前
DeepSeek总结的用 C# 构建 DuckDB 插件说明
前端·数据库·c#·插件·duckdb
泯泷39 分钟前
从零构建寄存器式 JSVMP:实战教程导读
前端·javascript·算法
椰子皮啊1 小时前
mediasoup+Vue3避坑指南:解决黑屏、闪屏、流绑定失效三大难题
vue.js·前端框架
开源盛世!!1 小时前
3.19-3.21
linux·服务器·前端
必胜刻1 小时前
AJAX 请求理解
前端·ajax·okhttp·前后端交互
小民AI实战笔记1 小时前
NVM实战指南:高效管理你的Node.js环境
前端·node.js
www_stdio1 小时前
前端异步核心:Promise 从入门到吃透
前端
朱建伟1 小时前
大神尤雨溪再次出手,前端工具链整合--该文章是对vite plus官方README文档进行了翻译
前端·vite