jquery对象数值步进显示效果

来源:互联网 发布:淘宝店运营方案论文 编辑:程序博客网 时间:2024/06/08 03:07

一、需求描述:在项目中有时需要页面显示数值的元素,在页面刷新时数值从零动态增加到指定值的显示效果,本文即为该效果的简单实现。

二、代码:

;(function($){    ;(function($){    $.fn.autoIncreActive = function(totaltime,speed){//数字逐渐增加显示时,totaltime数字加载总时间        var $self = $(this);        var loops = Math.ceil(totaltime/speed);        return $self.each(function(index,element){            var value = 0,tempval;            if(isNaN(Number($(element).text()))){                throw "not a number";                return false;            }else{                value =  Number($(element).text());                tempval = value;            }            if($(element).data("timer")){                clearInterval($(element).data("timer"));                $(element).removeData("timer");            }            $(element).data("timer",setInterval(function(){                value = value - Math.ceil(tempval/loops);                if(value<0){                    value = 0;                    clearInterval($(element).data("timer"));                    $(element).removeData("timer");                }                $(element).text(tempval-value);            },speed));        });    }})(jQuery);

参考:
http://www.17sucai.com/preview/1/2014-08-01/%E6%95%B0%E5%AD%97%E5%8A%A8%E7%94%BB/js/index.js

原创粉丝点击