Question

我正在做一个更大的项目，但我正在尝试一个更简单的倒数计时器版本，只有秒而不是分钟。代码如下描述

所以基本上我有 60 秒的 html(id="initial")。我有一个带有定时器功能的按钮。在 javascript 中，我通过在变量上使用 parseint 来获取 h3 标签中的值，当然还有 innerHTML 来获取标签本身内的文本。

然后我创建一个名为 newTime 的新变量并将其设置为 newTime = initial--; 然后我用innerHTMl 更新初始值，比如initial.inneHTML = newTime。然而，它不起作用。无论如何，代码如下：

setInterval(setUp, 1000);

function setUp(){

    var initial = parseInt(document.getElementById("initial").innerHTML);
    
    var newTime = initial--;
    
    initial.innerHTML = newTime;
}

<button onclick="setUp()">Activate timer</button>
<h3 id="initial">60</h3>

Answer 1

您触发的是 setUp 函数，而不是 Interval 本身。将间隔分配给变量并将其传递给 onclick。

Answer 2

有两个问题：

间隔处理，但在另一篇文章中有介绍
变量 initial 被赋值为整数，然后将其视为一个元素。

问题 2 的解决方案：

var initialElement = parseInt(document.getElementById("initial").innerHTML);
function setUp(){

    var initialValue = parseInt(initialElement.innerHTML);
    
    var newTime = initialValue--;
    
    initialElement.innerHTML = newTime;
}

我真的建议只查找元素一次，而不是每个间隔一次

Answer 3

您正在尝试设置整数的 innerHTML。

var initial = document.getElementById("initial");
var newTime = parseInt(initial.innerHTML)-1;
initial.innerHTML = newTime;

此外，您应该在点击时运行 setInterval(setUp, 1000); 并保存结果：

<button onclick="myTimer=setInterval(setUp, 1000);">Activate timer</button>

您还需要一种停止计时器的方法：

if (newTime == 0)
    clearTimeout(myTimer);

Answer 4

有些问题，我会一一解决。

目前，setInterval(setUp, 1000); 在按钮之前被调用，因此计时器将立即启动，让我们将其移动到函数内部。我们将向 setInterval 传递一个 anonymous function 以及我们的倒计时代码
您正在将 .innerHTML 保存到变量 initial，但是，您正在尝试使用相同的变量再次设置 .innerHTML。让我们将它们分成 2 个变量，即每次迭代中的 element 和当前 value。 element 可以放在 setInterval 之外，因为对 <h3> 的引用不会改变，因此无需继续调用 getElementById
value--; 不返回任何内容，它增加当前变量本身，让我们删除额外的变量
当我们到达 setInterval 时，我们不会停止 0，让我们也解决这个问题。

然后，我们最终得到这样的结果：

function setUp(){
  
    // Save the h3 element
    var element = document.getElementById("initial");

    // Create setInterval, save to variable to clear later
    var timer = setInterval(function() {
         
        // Current element value
        var value = element.innerHTML;
        
        // Decrease
        value--;
        
        // Set value
        element.innerHTML = value;
        
        // Clear if we're at 0
        if (value === 0) {
            clearTimeout(timer);
        }
    }, 1000);
}

<button onclick="setUp()">Activate timer</button>
<h3 id="initial">60</h3>

Answer 5

我会修改javascript代码：

function setUp(){

    var initial = parseInt(document.getElementById("initial").innerHTML);
    
    var newTime = initial--;
    
    initial.innerHTML = newTime;
}

function trigger(){
    setInterval(setUp, 1000);
}

在你的 html 上：

<button onclick="trigger()">Activate timer</button>
<h3 id="initial">60</h3>

想法是让按钮只触发间隔创建，并让setUp每秒执行一次。

Answer 6

倒计时最好通过 setInterval 调用被 clearInterval 调用停止：

document.querySelector('button').onclick=()=>{
 const inp=document.querySelector('input')
 let n=inp.value-1;
 const handle=setInterval(function(){
   inp.value=n;
   if (!n--) clearInterval(handle);
 },1000)
}

<button>start</button>
<input value="10">

如何创建倒计时 html 文本 60 到 0 的倒数计时器

6 个答案: