javascript - jQuery 计算从 0 到 div 的数字

Question

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 毫秒!我如何将结束变量编辑为我选择的 div 中的数字？我试过这个:

var end = "$('#value').text();" 但这不起作用。希望你能帮我编辑这一行。谢谢

Answer 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无法转换为数字，上述建议将导致错误；因此，可能值得包括错误处理以预测此类故障，例如，包括“默认”数字应该 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>

引用文献:

• Node.textContent .
• parseInt() .