1.功能1:按钮标签中的文字内容数字递减
2.功能2:当前按钮标签的数字为0时,修改按钮标签身上的文字内容
3.功能3:当前按钮标签的数字为0时,将按钮设置为可以点击的状态
css代码
<input type="button" class="btn" disabled value="我已经阅读用户协议(5)">
<script>
let i = 5;
let btn = document.querySelector('.btn');
let timeID = setInterval(function () {
i--;
// 将数字减一后的值重新赋值给按钮
btn.value = `我已经阅读用户协议(${i})`
// 停止定时器
if (i <= 0) {
clearInterval(timeID);
// 修改按钮文字
btn.value = '同意';
// 修改按钮的点击状态为可以点击
btn.disabled = false;
}
}, 1000);
// 2.功能2:当前按钮标签的数字为0时,修改按钮标签身上的文字内容
// 3.功能3:当前按钮标签的数字为0时,将按钮设置为可以点击的状态
</script>
效果图: