用于更改文本内容的javascript计时器

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

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

---

单击按钮时调用上述函数。

JavaScript不支持。我不认为您打算使用它，但是单引号或双引号中的任何内容都不会被JavaScript计算

要正确地增加p标记中的值，您需要

// valid
x.innerHTML = (parseInt(x.innerHTML, 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;
}

当然，这个计数器可以大大简化，但这表明了关注点的良好分离。计数器是以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();

---

您再次将x设置为字符串，而不是将其设置为innerHTML

function timedText() {
  var x = document.getElementById('txt');
  setInterval(function () {
     //set the inner html, parse the value from the inner html as well
     x.innerHTML = (parseInt(x.innerHTML, 10) + 1);
  }, 500);
}

---

这是一把工作小提琴

我基于@user633183-answer构建并创建了这个JSFIDLE

它根据他创建的计时器切换标题。也许它对其他人也有用

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

var titles = [
    "hello i am the first title",
    "whats up, i am the second title",
    "add here any extra titles you want"
];

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

function run() {
    value += 1;
    if (value == titles.length) value = 0;

    elem.setAttribute("value", value);
    updateDisplay(titles[value]);
}

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;
}

var elem = document.getElementById("title-switcher");

counter = new Counter(elem, 2000);
counter.start();

---

您现在所做的是更改变量内容，而不是元素的内容。如果要更改元素中的文本，则需要使用innerHTML innerText和textContent也是一个选项，但它们在不同浏览器中的行为可能不同。除此之外，如果将函数和构造函数作为字符串编写，它们将不起作用。你不需要用那些双引号。@DarkAshelin，我确实看到你在编辑我的文章，我不确定这是否是有意的。如果我想解释我的答案，我会接受编辑的。无论如何，我不想让你认为我很粗鲁，所以我在这里写了一张便条。xo@naomik啊，我想你没有注意到建议的编辑，因为你是中间的小编辑，总是重写我的编辑。所以我在尝试了几次后就放弃了xD显然，快速发布简短的答案是一件好事，然后继续扩展它们，与从一开始就发布完整的答案相反。我不知道。@DarkAshelin是的。我通常先给出一个简单的最低限度的答案，这样OP就能马上得到他们需要的。然后我将对其进行扩展，以包含更详细的解决方案。如果我有雄心壮志，我会回去根据需要添加解释，这样更多的观众可以从信息中受益。

function timedText() {
  var x = document.getElementById('txt');
  setInterval(function () {
     //set the inner html, parse the value from the inner html as well
     x.innerHTML = (parseInt(x.innerHTML, 10) + 1);
  }, 500);
}

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

var titles = [
    "hello i am the first title",
    "whats up, i am the second title",
    "add here any extra titles you want"
];

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

function run() {
    value += 1;
    if (value == titles.length) value = 0;

    elem.setAttribute("value", value);
    updateDisplay(titles[value]);
}

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;
}

var elem = document.getElementById("title-switcher");

counter = new Counter(elem, 2000);
counter.start();