HTML：
<div id="value">300</div>
jQuery：
function animateValue(id, start, end, duration) {
var start= 0 ;
var end = 100;
var duration = 500;
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value",0,0,0);
使用此代码将计数值从0增加到100，持续时间为500毫秒！ 如何编辑结束var到我选择的div中的数字？ 我试过这个：
var end = "$('#value').text();"但这不起作用。
希望你能帮我编辑这一行。
感谢
答案 0 :(得分：1)
您只需使用parseInt( getElementById(id).textContent )首先检索文本内容，然后将其更改为数字（而不是字符串，因为textContent将始终返回）：
function animateValue(id, start, end, duration) {
var start= 0 ;
// here we retrieve the text of the 'target' element by its 'id',
// and convert the returned value into a number, using
// parseInt(); the first argument is the string to convert and
// the second is the numeric base of the number into which you
// want to convert the given numeric string:
var end = parseInt(document.getElementById(id).textContent, 10);
var duration = 500;
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value",0,0,0);
function animateValue(id, start, end, duration) {
var start= 0 ;
var end = parseInt(document.getElementById(id).textContent, 10);
var duration = 500;
var range = end - start;
var current = start;
var increment = end > start? 1 : -1;
var stepTime = Math.abs(Math.floor(duration / range));
var obj = document.getElementById(id);
var timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value",0,0,0);<div id="value">300</div>
请注意，如果元素的textContent无法转换为数字，则上述建议会导致错误;因此，可能值得包括错误处理以预测此类故障，例如包括“默认情况”＆＃39;号码应parseInt()返回NaN（非数字）：
// here, if parseInt() returns NaN (an essentially falsey value) then
// the default of 100 will be used instead:
var end = parseInt(document.getElementById(id).textContent, 10) || 100;
通过一些理智检查和整理，我建议采用以下方法：
function animateValue(id, start, end, duration) {
// already declared variables, they don't need
// re-declaring with 'var' (you declared/defined them
// in the function's openening parenthesis):
// Ensuring that we have a defined 'start' value,
// if there is no start argument (its typeof is equal
// to 'undefined' we set the default of 0; otherwise
// if it is defined we set to either the Number that was
// passed to the function (converting, if necessary, from
// a String and, if that returns NaN we instead use the
// default of 0):
start = 'undefined' === typeof start || !parseInt(start, 10) ? 0 : parseInt(start, 10);
// here we retrieve the textContent of the element with
// the id given in the function arguments; convert that
// into a base-10 number and use that number, unless
// parseInt() returns NaN, in which case we use the default
// of 100:
end = parseInt(document.getElementById(id).textContent, 10) || 100;
// as above, we need to ensure that duration is defined,
// check that it's a number (or numeric string) and then
// use that nummber; otherwise we can simply use the default
// of 500:
duration = 'undefined' === typeof duration || !parseInt(duration, 10) ? 500 : parseInt(duration, 10);
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = document.getElementById(id),
timer = setInterval(function () {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
animateValue("value");
function animateValue(id, start, end, duration) {
// already declared variables, they don't need
// re-declaring with 'var' (you declared/defined them
// in the function's openening parenthesis):
// Ensuring that we have a defined 'start' value,
// if there is no start argument (its typeof is equal
// to 'undefined' we set the default of 0; otherwise
// if it is defined we set to either the Number that was
// passed to the function (converting, if necessary, from
// a String and, if that returns NaN we instead use the
// default of 0):
start = 'undefined' === typeof start || !parseInt(start, 10) ? 0 : parseInt(start, 10);
// here we retrieve the textContent of the element with
// the id given in the function arguments; convert that
// into a base-10 number and use that number, unless
// parseInt() returns NaN, in which case we use the default
// of 100:
end = parseInt(document.getElementById(id).textContent, 10) || 100;
// as above, we need to ensure that duration is defined,
// check that it's a number (or numeric string) and then
// use that nummber; otherwise we can simply use the default
// of 500:
duration = 'undefined' === typeof duration || !parseInt(duration, 10) ? 500 : parseInt(duration, 10);
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = document.getElementById(id),
timer = setInterval(function() {
current += increment;
obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
// using the defaults:
animateValue("value");
// using a custom 'start' (first as a number):
animateValue("value2", 200);
// (and as a string):
animateValue("value3", "500");<div id="value">300</div>
<div id="value2">500</div>
<div id="value3">1000</div>
参考文献：