帮助中心

首页网页特效整站源码 PHP实例网站模版工具箱常用代码论坛游戏源码资源分享

数字自动动态增长动画效果

浏览：792次- 评论：2次- 发布时间：2019-03-29

Html

Css

Js

window.onload = function() {
    animationNumber(['totalPrice', 'totalOrder', 'monthsPrice', 'monthsOrder'])
    //animationNumber('monthsprice')
}

function animationNumber(elementarray, options) {
    options = Object.assign({}, options, {
        'allTime': 3000,
        'speed': 50
    })
    var allTime = options.allTime,
        speed = options.speed;
    if (elementarray instanceof Array) {
        var oneNumArray = [],
            elementidArray = [],
            countArray = [],
            valueOneArray = [];
        for (var i = 0; i < elementarray.length; i++) {
            var elementid = document.getElementById(elementarray[i]),
                valueN = elementid.getAttribute('data-value'),
                valueOne = 0;
            if (valueN instanceof Array) {
                valueOne = eval(valueN)[0]
            } else {
                valueOne = valueN
            }
            valueOneArray[i] = valueOne
            oneNumber = Math.floor(valueOne / (allTime / speed)) || 1;
            oneNumArray[i] = oneNumber
            elementidArray[i] = elementid
            countArray[i] = 0
        }
        var datetime = setInterval(function() {
            var countClear = 0
            for (var k = 0; k < elementidArray.length; k++) {
                countArray[k] += oneNumArray[k]
                if (countArray[k] >= valueOneArray[k]) {
                    countClear++
                    countArray[k] = valueOneArray[k]
                }
                elementidArray[k].innerText = '￥' + countArray[k];
            }
            if (countClear >= 4) {
                clearInterval(datetime)
            }
        }, 30)
    }
    if (typeof elementarray === 'string') {
        var e = document.getElementById(elementarray),
            allNum = eval(e.getAttribute('data-value'))[0] ? eval(e.getAttribute('data-value'))[0] : 0,
            oneNumber = Math.floor(allNum / (allTime / speed)),
            count = 0;
        var datetime = setInterval(function() {
            count += oneNumber
            if (count >= allNum) {
                clearInterval(datetime);
                count = allNum
            }
            e.innerText = '￥' + count;
        }, 30)
    }
}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3

素材牛VIP永久特权

立即下载收藏

积分说明：注册即送10牛币，每日签到可获得5牛币，成为VIP会员可永久免牛币下载！充值积分充值会员更多说明»

代码描述：实现动态数字动画效果

animationnumber函数的参数可以是数组也可以是单个字符串,但是必须是数组中的元素是数字类型

讨论这个常用代码（2）回答他人问题或分享心得会奖励牛币

zj***ar

2019年06月21日

不错不错，下载了，谢谢

qq***43

2019年12月22日

可以呀。学习

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取

我的积分余额：0 已下载次数：792

所需牛币：5 开始下载

牛币获取：签到、评论、充值 » 在线充值（10牛币=1元）

成为VIP可永久免积分下载全部常用代码 » 查看详情