animationnumber函数的参数可以是数组也可以是单个字符串,但是必须是数组中的元素是数字类型
HTML部分
<div class="content-boxs">
<div class="row-price">
<div class="price-box">
<p id="totalPrice" data-value="250">¥0.00</p>
</div>
</div>
<div class="row-price">
<div class="price-box">
<p id="totalOrder" data-value="852">¥0.00</p>
</div>
</div>
<div class="row-price">
<div class="price-box">
<p id="monthsPrice" data-value="48596">¥0.00</p>
</div>
</div>
<div class="row-price">
<div class="price-box">
<p id="monthsOrder" data-value="6952">¥0.00</p>
</div>
</div>
</div>
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)
}
}