JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】

下面是关于“JS实现的倒计时恢复按钮点击功能”的完整攻略：

一、实现思路

1. 通过JavaScript获取页面上的倒计时元素，并从元素的data-*属性中读取倒计时的时间。
2. 开始倒计时，每秒减少一秒，并将剩余时间更新到页面上。
3. 倒计时结束后，显示恢复按钮，并将按钮设置为可点击状态。
4. 添加按钮的点击事件，点击按钮后重新开始倒计时。

二、实现步骤

1. HTML结构：

<div class="countdown" data-time="60">
  <span id="time">60s</span>
  <button id="btn" disabled>恢复</button>
</div>

1. CSS样式：

.countdown {
  display: inline-block;
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1;
}

1. JavaScript代码：

var time = document.getElementById('time'); // 获取倒计时元素
var btn = document.getElementById('btn'); // 获取恢复按钮元素
var countTime = parseInt(time.parentNode.dataset.time) || 60; // 从data-time属性中读取倒计时的时间
var timer = null; // 计时器

// 开始倒计时
timer = setInterval(function() {
  if(countTime <= 0) { // 倒计时结束
    clearInterval(timer); // 清除计时器
    btn.removeAttribute('disabled'); // 恢复按钮设置为可点击
  } 
  time.innerHTML = countTime + 's'; // 更新剩余时间
  countTime--;
}, 1000);

// 恢复按钮被点击
btn.addEventListener('click', function() {
  btn.setAttribute('disabled', true); // 恢复按钮设置为不可点击
  countTime = parseInt(time.parentNode.dataset.time) || 60; // 重新读取倒计时时间
  time.innerHTML = countTime + 's'; // 更新剩余时间
  timer = setInterval(function() { // 重新开始倒计时
    if(countTime <= 0) { // 倒计时结束
      clearInterval(timer); // 清除计时器
      btn.removeAttribute('disabled'); // 恢复按钮设置为可点击
    }
    time.innerHTML = countTime + 's'; // 更新剩余时间
    countTime--;
  }, 1000);
});

三、示例说明

1. 倒计时恢复协议阅读

如下示例演示了如何在协议阅读时添加倒计时，阅读过程中只有满足时间限制，才能继续往下操作。

<p>
  请在 <span class="countdown" data-time="10"><span id="time">10s</span><button id="btn" disabled>阅读完成</button></span> 内完成此协议的阅读。
</p>
<p>阅读内容……</p>

<script>
  // JavaScript代码
</script>

1. 倒计时恢复验证码发送

如下示例演示了如何在发送验证码时添加倒计时，发送后只有在一定时间之后才能再次发送。

<p>
  <label>手机号：<input type="text"></label> 
  <label>验证码：<input type="text"></label> 
  <button id="send">发送验证码</button>
  <span class="countdown" data-time="60"><span id="time">60s</span><button id="btn" disabled>再次发送</button></span>
</p>

<script>
  // JavaScript代码
</script> 

以上是对“JS实现的倒计时恢复按钮点击功能”的完整攻略，希望能对你有所帮助。