Question

我希望用户点击后三秒钟后更改文字。我希望用户点击并在屏幕上放置一些文本（这已经有效），三秒后文本变为空（＆＃34;＆＃34;）。我试过的代码是：

的JavaScript：

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";
}

function cambio() {
    var contador = 0;
    setInterval(cambio, 1000);
    contador++;
    if(contador == 3)
        document.getElementById("accion").innerHTML = "";
    }

HTML：

<h1 id="accion" class="t-accion"></h1>
<img src="img/almuerzo.png" class="i-almuerzo" height="100px" onclick="almuerzo()" onclick="cambio()" />

Answer 1

只需一个功能即可实现。首先更改文本并使用setTimeout在三秒后删除文本。

像：

var timeout;
function changeText() {
  var elem = document.getElementById("accion");

  var date = new Date();
  var horas = date.getHours();
  var minutos = (date.getMinutes() < 10 ? '0' : '') + date.getMinutes();

  elem.innerHTML = horas + ":" + minutos + " Almuerzo";

  clearTimeout(timeout);
  timeout = setTimeout(function() {
    elem.innerHTML = "";
  }, 3000);
}

Answer 2

您尝试在cambio函数上使用递归，但每次调用它时都会重新初始化其contador变量，因此contador == 3条件永远不会成立。

我没有看到等待3秒1秒而不是3秒等待1秒的重点。如果每秒都没有采取其他措施，只需在一次等待后立即采取行动：

function cambio() {
    setInterval(function() {
        document.getElementById("accion").innerHTML = "";
    }, 3000);
}

如果确实存在您的代码尚未显示的点，您将需要在函数范围之外定义contador变量。此外，计数器应该在递归之前递增，如果达到目标值，则不应该进行递归：

var contador = 0;
function cambio() {
    if(contador == 3) {
        document.getElementById("accion").innerHTML = "";
    } else {
        contador++;
        setInterval(cambio, 1000);
    }
}

Answer 3

我发现最简单的方法就是声明一个函数并删除匿名函数中的文本

function almuerzo() {
    var date = new Date();
    var horas = date.getHours();
    var minutos = (date.getMinutes() < 10? '0' : '')+ date.getMinutes();
    document.getElementById("accion").innerHTML = horas + ":" + minutos + " Almuerzo";

    setTimeout(() => {document.getElementById("accion").innerHTML = ""}, 3000);
}

一些解释：

关键是cambio是一个手工制作的setInterval，但你犯了一些错误：

setInterval(cambio, 1000) cambio without（）是一个[Object：function]（做一个typeof（cambio）＆amp; typeof（cambio（））来看看差异）所以你没有调用你赢得的函数' t有来自其通话的返回值！

此外，请记住setInterval使函数的执行异步，因此在您的代码中，它将contador设置为0，然后启动另一个实例（如果您将括号放入cambio）然后递增1并保留执行。第二个实例将contador设置为0并启动另一个isntance等等......

function cambio() {
    var contador = 0; 
    setInterval(cambio, 1000); /* relaunch asynchronously cambio, 
    reset contador to 0, then relaunch cambio, etc...*/

    contador++;                 // contador === 1

    if(contador == 3)           /* it will never be triggered
    because in each instance of cambio that will run in parallel,
    cambio value will be equal to 1 */
        document.getElementById("accion").innerHTML = "";

    }

X秒后如何更改文字？ HTML

的JavaScript：

HTML：

3 个答案: