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))
})
相关推荐
xixingzhe21 小时前
idea启动vue项目
java·vue.js·intellij-idea
超级无敌暴龙兽2 小时前
和我一起刷面试题呀
前端·面试
wzl202612132 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常2 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常2 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒2 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水2 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi3 小时前
LLM Agent 浅析
前端·javascript·人工智能
科雷软件测试3 小时前
使用python+Midscene.js AI驱动打造企业级WEB自动化解决方案
前端·javascript·python