js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js

本来在项目中我自己实现的效果是数字由0渐增到指定的数字就好。

但是,最终效果不理想!

Why?

最终指定的数字太大了,TMMD,滚动好久就不到,那用户想看自己有多少钱了,那不是就一直等着!!!所以这个效果OUT!

改变思路

需求:在规定的时间内,实现数字由:初始值滚动到指定的数字

找到一个动画插件:jquery.animateNumber.js

html:

<span id="bmikece" style="font-size: 35px;"><%=user.available_predeposit %></span>     //后台绑定的最终需显示的数据

js:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.animateNumber.js"></script>        //需引用的插件基于js

//调用numCount()
     numCount();

//数字递增效果
    function numCount() {
            //小数点位允许多少
               var decimal_places = 2;
               var decimal_factor = decimal_places === 0 ? 1 : Math.pow(10, decimal_places);
               $(‘#bmikece‘)
                   .animateNumber(
                   {
                         number: (<%=user.available_predeposit %>) * decimal_factor,

                         numberStep: function(now, tween) {
                                  var floored_number = Math.floor(now) / decimal_factor,
                                        target = $(tween.elem);

                                   if (decimal_places > 0) {
                                        //强迫小数点,即使它们是0。
                                       floored_number = floored_number.toFixed(decimal_places);

                                      //用‘,‘替换‘分隔符‘
                                       floored_number = floored_number.toString().replace(‘.‘, ‘.‘);
                                }
                                 target.text(floored_number);
                        }
            },2000);
}

最终的效果还是不错的(笑脸)

原文地址:https://www.cnblogs.com/liuqingxia/p/8949605.html

时间: 2024-10-15 14:03:35

js-数字渐增到指定的数字,在指定的时间内完成(有动画效果哦)插件jquery.animateNumber.js的相关文章

jquery.animateNumber.js 数字动画效果

应要求  ,改个东西,需要的数字动画效果网上搜了,都没有满足要求效果的现成插件,最后找到<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js</a>. 需要的效果如图:: 要求有分割符及小数位,但是<a href="http://www.51xuediannao.com/mbdemo.php">jquery.animateNumber.js

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

Form表单插件jquery.form.js

常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> <script src="http://malsup.github.com/jquery.form.js"><

一个简单的页面弹窗插件 jquery.pageMsgFrame.js

页面弹窗是网站中常用的交互效果,它可以强提示网站的某些信息给用户,或者作用于某些信息的修改等等功能. 这几天在做一个项目的时候,就顺捎把这个插件写一下,栽棵树,自己乘凉吧. 原创博文,转载请注明出处:http://www.cnblogs.com/dereksunok/p/3724764.html html代码: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5

jQuery插件 -- 动态事件绑定插件jquery.livequery.js

http://blog.csdn.net/zzq58157383/article/details/7721974 动态事件绑定插件livequery, 可以利用它给相应的DOM元素注册事件或者触发回调函数.不仅当选择器匹配的元素会被绑定事件,而且后来通过JavaScript添加的元素都会被绑定事件.当元素不再和选择器匹配时,livequery会自动取消事件注册,使得开发者不再需要关注HTML元素的来源,只需要关注如何编写其绑定的事件即可 通过jQuery选择器选择一个DOM元素,livequer

jQuery表单验证插件——jquery.validate.js

官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 1 <script src="../js/jquery.js" type="text/javascript"></script> 2 <script src="../js/jquery.validate.js" type="text/javascript&qu

jquery二维码生成插件jquery.qrcode.js

插件描述:jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 转载于:http://www.jq22.com/jquery-info294 如何使用它 将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> <script type="text/javascrip

表单验证插件jquery.validate.js学习

一.前言 在做web应用的时候,数据验证是非常重要的,一个不小心就产生bug,而bug多了显得个人开发能力都有问题,这个时候如果能有一个用着得心应手的验证插件,开发效率也会大大的提高.就好像牛魔王告诉孙悟空,你缺少一件兵器,于是他就抢来了棒子,用着那叫一个爽.三首蛟告诉杨戬,你手里缺少一件兵器,于是他把三首蛟变成了三尖两刃枪里,再配合一个忠心而又嗅觉灵敏的狗狗,办起事来真是事半功倍.今天我也学学这款比较流行的表单验证插件,给自己搞一个好使的兵器. 插件官网:https://jqueryvalid

jQuery插件jquery.fullPage.js

简介如今我们经常能看到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或者色块做背景,再添加一些简单的内容,显得格外的高端大气上档次,比如 iPone 5C 的介绍页面.QQ浏览器的官方网站.百度史记2013效果.如果你也希望你的网站能设计成全屏的,显得更上档次,我们可以试试fullPage.js. fullPage.js是一个基于jQuery的插件,他能够很方便.很轻松的制作出全屏网站,主要功能有:        支持鼠标滚动        支持前进后退和键盘控制        多个回调函数