JS实现倒计时按钮示例

在前端开发中，常常需要使用到倒计时功能。例如，在支付页面上，用户需要在规定时间内完成操作，否则交易会被取消。这时就需要一个倒计时功能来提醒用户。

本文将介绍如何使用JavaScript实现一个简单的倒计时按钮，并附带完整代码和解释。

实现思路

我们可以通过JavaScript实现倒计时按钮的功能。具体实现思路如下：

获取按钮元素以及倒计时时间。
点击按钮后，禁用按钮并开始倒计时。
每隔一秒更新倒计时时间，并显示在按钮上。
倒计时结束后，启用按钮并重置倒计时时间。

代码实现

------- ---------------------------------

--------
  ----- --- - -----------------------------------------
  --- --------- - --- -- -------------

  -------- ---------------- -
    -- ---------- --- -- -
      --------------------------------
      ------------- - --------
      --------- - ---
      -------
    - ---- -
      ---------------------------- ------
      ------------- - ----------------------
      ------------
    -
    ------------- -- -
      -----------------
    -- ------
  -

  ----------------------------- -- -- -
    -----------------
  ---
---------

以上代码实现了一个倒计时60秒的按钮，点击后会禁用按钮，并显示倒计时时间，倒计时结束后会启用按钮并重置倒计时时间。具体实现过程如下：

获取按钮元素以及倒计时时间（第2行）。
给按钮添加点击事件监听器，点击按钮会调用startCountdown函数开始倒计时（第23行）。
startCountdown函数中，首先判断倒计时是否结束。如果结束，就启用按钮、重置倒计时时间并返回（第7-11行）。否则，禁用按钮、更新倒计时时间并使用setTimeout函数每隔一秒重新调用startCountdown函数（第13-20行）。

深度解析

1. 使用`setTimeout`实现定时器

在上面的代码中，我们使用了setTimeout函数来实现定时器功能。setTimeout函数有两个参数：回调函数和延迟时间。回调函数是要执行的函数，延迟时间是毫秒数。当延迟时间到达后，函数将被调用。

由于JavaScript是单线程的，因此setTimeout函数不会阻塞主线程。它会在指定的时间后将回调函数放入任务队列中，等待主线程空闲时才会执行。因此，在使用setTimeout函数时，我们需要注意延迟时间的设置，避免对性能造成影响。

2. 使用`setAttribute`和`removeAttribute`修改属性

在上面的代码中，我们使用了setAttribute和removeAttribute函数来修改按钮元素的disabled属性。这两个函数可以方便地修改HTML元素的各种属性。

setAttribute函数有两个参数：属性名和属性值。它会将指定元素的对应属性设置为指定值。例如：

------- ------------------------

--------
  ----- --- - ----------------------------------
  ---------------------------- ------
---------

上面的代码将按钮元素的disabled属性设置为true，使其变成禁用状态。

removeAttribute函数只有一个参数：属性名。它会将指定元素的对应属性移除。例如：

------- ----------- ---------------------

--------
  ----- --- - ----------------------------------
  --------------------------------
---------

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/3430

js实现的倒计时按钮实例