利用JS实现数字增长

上次在项目中碰到要实现数字增长的效果,实现数字从0到目标数的增长,来看看效果

现在把它扩展开来可以实现不同效果

主要思路就两部分

1.每隔三个数字之间加上,

2.实现动起来

对于1使用正则来完成十分的方便

1 ? '.' + arr[1] : ""; reg = /(\d+)(\d{3})/; if (this.option.isfomat) { while (reg.test(x1)) { x1 = x1.replace(reg,'$1' + "," + "$2"); } } if (this.option.isfomat) { return this.option.prefix + x1 + x2; } else { return this.option.prefix + str; } }

要实现加起来的效果可以使用requestAnimationFrame方法,然后处理一下兼容就可以了。

rush:js;"> var change = function() { var p = Math.min(1.0,(new Date().getTime() - that.startTime) / that.option.duration);//当前时间减去开始时间,然后除以总时间,Math.min,两个数取最小值。 var nums = that.num * p; that.elm.innerHTML = that.fomatNum(that.num * p); if (p < 1.0) {// requestAnimationFrame(function() { change(); }); } else { cancelAnimationFrame(change); } } requestAnimationFrame(function() { change(); });

如果要实现数字在可视区再动起来的效果,可以自己监听dom是否在可视区然后调用

以上就是本文的全部内容,如果有疑问欢迎大家留言探讨,也谢谢大家对编程之家的支持

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...