js实现数字递增特效实例代码

来源：动视网责编：小OO 时间：2020-11-27 20:17:03

js实现数字递增特效实例代码

上周五应着公司临时需求，一天的时间解决掉官网（ps：比较简单哈哈），需求里面有一个特效就是数字递增到指定的数值，其实JS写也不复杂的，但是我发现一个js小插件，这个插件轻巧简单，用起来也非常简单实用。在这里分享给小盆友们吧，喜欢的直接拿走。上面就是这个插件的效果，我们来看一下怎么使用的吧。第一： HTML部分这里简单列举一个。

推荐度：

点击下载本文 文档为doc格式

导读上周五应着公司临时需求，一天的时间解决掉官网（ps：比较简单哈哈），需求里面有一个特效就是数字递增到指定的数值，其实JS写也不复杂的，但是我发现一个js小插件，这个插件轻巧简单，用起来也非常简单实用。在这里分享给小盆友们吧，喜欢的直接拿走。上面就是这个插件的效果，我们来看一下怎么使用的吧。第一： HTML部分这里简单列举一个。

本篇文章主要介绍了js实现仿支付宝我的财富里的数字递增特效，具有很好的参考价值。下面跟着小编一起来看下吧

上周五应着公司临时需求，一天的时间解决掉官网（ps：比较简单哈哈），需求里面有一个特效就是数字递增到指定的数值，其实JS写也不复杂的，但是我发现一个js小插件，这个插件轻巧简单，用起来也非常简单实用。在这里分享给小盆友们吧，喜欢的直接拿走。

上面就是这个插件的效果，我们来看一下怎么使用的吧

第一： HTML部分这里简单列举一个

 <p class="counter col_fourth">
 <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2>
 <p class="count-text ">小月博客</p>
 </p>

上面我们来了解两个关键的东西：

data-to 这个属性控制你最终要递增的数值是多少

data-speed 这个看英文的意思就很清楚了就是表示数据递增的速度了

ps：这里的class和id 根据大家各自的修改去调整就好了，

第二：JS部分也是插件的核心代码