使用按钮控制开始的倒计时计数器 - JavaScript 代码示例 - 常规

本文将教你如何使用 JavaScript 创建一个简单的倒计时计数器，并通过一个按钮来控制其开始。以下是一个完整的代码示例：

HTML 代码：

<button id='countup-btn'>CountUp</button>
<p>Count: <span id='counter'>0</span></p>

JavaScript 代码：

const countupBtn = document.getElementById('countup-btn');
countupBtn.addEventListener('click', startCountUp);

let counter = 0;
function startCountUp() {
  setInterval(() => {
    counter++;
    document.getElementById('counter').textContent = counter;
  }, 1000);
}

代码解释：

HTML 结构： 我们使用一个按钮元素 (<button>) 和一个段落元素 (<p>) 来显示计数器。按钮的 id 属性设置为 countup-btn，段落中使用 span 元素 (<span>) 来显示计数器的值，其 id 属性设置为 counter。
获取按钮元素： 使用 document.getElementById() 获取按钮元素，并将其存储在 countupBtn 变量中。
添加点击事件监听器： 使用 addEventListener() 方法为按钮添加一个点击事件监听器。当按钮被点击时，将执行 startCountUp() 函数。
定义计数器变量： 使用 let 关键字声明一个变量 counter 并将其初始化为 0。
startCountUp() 函数： 该函数使用 setInterval() 函数来创建一个定时器。每秒钟，定时器将执行回调函数，该函数会将计数器变量加 1，并将结果更新到 span 元素中。

通过以上代码，你就成功地创建了一个简单的倒计时计数器，并通过按钮控制其开始。你可以根据需要修改代码，例如改变计数器的初始值、步长以及显示的格式。