js滚动数字动画效果

代码复制，直接调用就好了。

需注意！由于js不能精确到小数点后的0，（9.90）在JS中为9.9，所以不能用在有小数点的场景下，只能用在整数的情况下

/*** 滚动数字* @param {*DOM} DOM DOM对象* @param {*Number} initNum 滚动初始值  默认值为0* @param {*Number} targetNum 结束值    默认值为1000* @param {*Number} speed      速度     默认值为10*/
export function numberRun(DOM, initNum = 0, targetNum = 1000, speed = 10) {let numText = initNum;let global;function numberGlobal() {numText += speed; // 速度的计算可以为小数if (numText >= targetNum) {numText = targetNum;cancelAnimationFrame(global);} else {global = requestAnimationFrame(numberGlobal);}DOM.innerHTML = numText;}numberGlobal();
}

js滚动数字动画效果相关推荐

【SwiftUI模块】0018、SwiftUI搭建一个类似支付宝中的余额宝余额数字动画效果
SwiftUI模块系列 - 已更新18篇 SwiftUI项目 - 已更新1个项目往期Demo源码下载技术:SwiftUI.SwiftUI3.0.支付宝.余额宝.数字动画运行环境: SwiftUI ...
【web前端】JavaScript实现图片幻灯片滚动播放动画效果
JavaScript实现图片幻灯片滚动播放动画效果 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.co ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
使用JS代码编写动画效果
使用JS代码编写动画效果下面展示一些 JS代码. 创建一个可以简单移动的动画函数//obj 要执行动画的对象// attr 想要变化的方向或大小如width top left//target 目标 ...
vue2中实现滚动数字时钟效果
前言: 分享一个好玩的小组件,滚动数字时钟效果. 实现效果: 实现源码:新建一个vue文件,把下面内容都放进去,运行就好了 <template><div class="wr ...
matlab车轮滚动动画,flash制作车轮往前滚动的动画效果
用flash制作一种就好像车轮在往前转动方法,操作很简单,适合新手来学习,推荐过来,一起来学习吧! 步骤: 1.打开软件,,打开flash文档然后点击图层一第一帧.再点击颜料版把填充色改成没有,然后按 ...
html数字动画效果,原生JavaScript代码实现数字更新的动画效果
前言在很多数据统计类型网站的首页,经常会看到数据在动态的更新,而且会以动画的效果呈现. 今天这篇文章我们就来看看这个效果如何实现吧. 文中的代码已经放到github上了,感兴趣的同学可以自取.htt ...
iOS 模拟轮胎滚动3D动画效果
因为项目中需要实现跑车动画效果,于是希望采用静止的跑车图和转动的轮胎来实现跑车开动效果.首先轮胎的转动要考虑到3D环境中形状的变化,不应该是纯圆形的,而应该是椭圆形.有两种方法实现这样的效果, 一是通 ...
JS实现数字翻牌效果
JS实现数字变化翻牌效果一.效果图如下: 二.代码如下: 注意:需要引入JQuery.js. <!DOCTYPE html> <html lang="en"&g ...

js滚动数字动画效果

代码复制，直接调用就好了。

需注意！由于js不能精确到小数点后的0，（9.90）在JS中为9.9，所以不能用在有小数点的场景下，只能用在整数的情况下

js滚动数字动画效果相关推荐

最新文章

热门文章