下面是关于“JS实现的倒计时恢复按钮点击功能”的完整攻略:
一、实现思路
二、实现步骤
<div class="countdown" data-time="60">
<span id="time">60s</span>
<button id="btn" disabled>恢复</button>
</div>
.countdown {
display: inline-block;
padding:10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
line-height: 1;
}
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);
});
三、示例说明
如下示例演示了如何在协议阅读时添加倒计时,阅读过程中只有满足时间限制,才能继续往下操作。
<p>
请在 <span class="countdown" data-time="10"><span id="time">10s</span><button id="btn" disabled>阅读完成</button></span> 内完成此协议的阅读。
</p>
<p>阅读内容……</p>
<script>
// JavaScript代码
</script>
如下示例演示了如何在发送验证码时添加倒计时,发送后只有在一定时间之后才能再次发送。
<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实现的倒计时恢复按钮点击功能”的完整攻略,希望能对你有所帮助。
本文链接:http://task.lmcjl.com/news/8907.html