如何创建倒计时 html 文本 60 到 0 的倒计时答案

【问题标题】：How to create a countdown timer that countdown html text 60 to 0如何创建倒计时 html 文本 60 到 0 的倒计时
【发布时间】：2021-03-30 20:25:48
【问题描述】：

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

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

然后我创建一个名为 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>

【问题讨论】：

除了按钮点击调用错误代码之外，主要问题是这一行：initial.innerHTML = newTime; 虽然理论上你可以使用它的 id 引用<h3>，但你声明initial作为函数内部的变量并为其分配一个数字。换句话说，没有initial.innerHTML。这是您修复的代码：jsfiddle.net/4wnxbLhf
如果有人回答您的问题，请点击复选标记考虑upvoting 和/或accepting it。这向更广泛的社区表明您找到了解决方案，并为回答者和您自己赢得了一些声誉。

标签： javascript html

【解决方案1】：

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

【讨论】：

【解决方案2】：

有两个问题：

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

问题 2 的解决方案：

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

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

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案4】：

我会修改 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每秒执行一次。

【讨论】：

【解决方案5】：

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

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

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

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>

【讨论】：

【解决方案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">

【讨论】：