数字自动动态增长

PROMULGATOR

一一

广东省东莞市

← JS开牌动作

→ 贪吃蛇大作战

相关代码

数字自动动态增长

js数字动态加减

计数增长效果

自动数字变化

页面数字递增变化

jquery数字显示

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

立即下载

数字自动动态增长



代码描述：实现动态数字

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

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>数字自动动态增长-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号