javascript计时器来更改文本的内容

Question

在html中我提到了一个id ="txt"的类

<p id="txt">1</p>

我需要每500毫秒间隔加1.我使用了以下代码,但它没有用.

function timedText() {
    var x = document.getElementById('txt');

    setInterval(function () {x= "(parseInt(x, 10)+ 1).toString(10)";},500);


}

单击按钮时会调用上述功能.

Answer 1

JavaScript不支持字符串插值.我不认为您打算使用它,但JavaScript不会评估单引号(')或双引号(")中的任何内容.

要正确增加P标记中的值,您需要这样做

// valid
x.innerHTML = (parseInt(x.innerHTML, 10)+ 1).toString(10);

不是这个

// invalid
x = "(parseInt(x, 10)+ 1).toString(10)";

不过,上述解决方案非常短视.它在单个函数调用中耦合元素,计数器增量和计数器的延迟.更不用说,我们每次递增时都会重新解析字符串以获取整数.

如果我们将一个小对象包围在一个将计数器值保存在变量中会怎么样？该对象还可以包含自己的间隔函数和相应的间隔计时器.

让我们看看它可能是什么样子

function Counter(elem, delay) {
  var value = parseInt(elem.innerHTML, 10);
  var interval;

  function increment() {
    return value += 1; // This 1 could be turned into a variable that allows
                       // us to count by any value we want. I'll leave that
                       // as a lesson for you !
  }

  function updateDisplay(value) {
    elem.innerHTML = value;
  }

  function run() {
    updateDisplay(increment());
  }

  function start() {
    interval = window.setInterval(run, delay);
  }

  // exports
  // This actually creates a function that our counter can call
  // you'll see it used below.
  //
  // The other functions above cannot be accessed from outside
  // this function.
  this.start = start;
}

当然,这Counter可以大大简化,但这表明了关注点的良好分离.计数器初始化时元素开始innerHTML,计数器的所有操作都很好地分为单用途函数.您可以使用相同的方法来构建更复杂的对象,但仍然保持代码非常合理和可重用.

现在,您可以在任何元素上使用计数器

// get element
var elem = document.getElementById("txt");

// create counter with element and delay of 500ms
var counter = new Counter(elem, 500);

// start the counter
counter.start();

jsfiddle演示