JavaScript实现按钮点击序号识别与倒计时防抖功能

判断点击的是第几个按钮

在处理一组同类型按钮时，往往需要知道用户具体点击了哪一个。传统做法是通过点击事件对象获取当前元素，但直接确定其“第几个”的身份需要通过遍历或数组索引来完成。以下方法通过在初始化时为每个按钮绑定索引值，并在点击时读取该值来实现精准定位。

第1步：准备按钮结构

首先创建一组元素，无需额外添加ID或类名，依靠原生DOM结构即可。

第2步：编写核心脚本

使用 document.getElementsByTagName('button') 获取所有按钮节点列表。随后遍历该列表：
1. 为每个按钮设置一个自定义属性（如 i），值为当前循环索引加1。
2. 绑定 onclick 事件监听器。
3. 在点击回调函数中，通过 this.getAttribute('i') 读取之前存储的值，并弹出提示。

<html>
<head>
  <meta charset='utf-'>
</head>
<body>
  <button>第一个</button>
  <button>第二个</button>
  <button>第三个</button>
  <button>第四个</button>
  <button>第五个</button>
  <script>
    var but=document.getElementsByTagName('button');
    for(i=0;i<but.length;i++){
      but[i].setAttribute('i',i+1);
      but[i].onclick=function(){
        b=this.getAttribute('i');
        alert('这是第'+b+'个按钮');
      }
    }
  </script>
</body>
</html>

实现验证码发送后的倒计时功能

在用户注册或找回密码等场景中，为了防止恶意刷短信验证码，通常需要在点击发送按钮后禁用该按钮，并开始倒计时（例如60秒），期间按钮置灰且不可点击，倒计时结束后恢复可用状态。

第1步：构建HTML元素

创建一个类型为 button 或 input type="button" 的元素，赋予唯一的ID以便JavaScript定位。

第2步：实现倒计时逻辑

定义全局变量 wait 记录倒计时时长。创建一个处理函数 time(o)，接收按钮DOM对象作为参数：
- **结束条件**：当 wait 减至0时，移除 disabled 属性，重置按钮文本为初始内容，并将计时器归位。
- **持续过程**：若未到时间，则通过 setAttribute 设置 disabled=