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))
})
相关推荐
隐形喷火龙11 分钟前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
m0_7482411225 分钟前
Selenium之Web元素定位
前端·selenium·测试工具
风无雨30 分钟前
react杂乱笔记(一)
前端·笔记·react.js
鑫~阳42 分钟前
快速建站(网站如何在自己的电脑里跑起来) 详细步骤 一
前端·内容管理系统cms
egekm_sefg1 小时前
webrtc学习----前端推流拉流,局域网socket版,一对多
前端·学习·webrtc
m0_748234341 小时前
前端工作中问题点拆分
前端
艾斯特_1 小时前
JavaScript甘特图 dhtmlx-gantt
前端·javascript·甘特图
北海天空1 小时前
reactHooks到底钩到了什么?
前端·react.js
兩尛1 小时前
HTML-CSS(day01)
前端·html
我爱学习_zwj1 小时前
AJAX与Axios
前端·javascript·ajax