用户注册-----阅读用户协议倒计时按钮

保护头发的小张

已于 2022-09-01 10:03:56 修改

阅读量527

点赞数 1

分类专栏： JS demo 文章标签：前端 html javascript

于 2022-09-01 10:02:56 首次发布

本文链接：https://blog.csdn.net/Z1014h/article/details/126637291

版权

JS demo 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

效果图: