 

当前位置：马春杰杰  教程  正文

HTML如何限制按钮点击次数并且刷新页面不重置点击量

2023-02-19 分类：教程评论(0) 赞(312)

这里用到的是localStorage，localStorage是一种持久性的本地存储，可以存储键值对，使用JavaScript API来访问和存储数据，存储的数据没有时间限制，除非用户手动删除它们。

使用方法也很简单：

<button id="clickButton" onclick="limitClick()">Click Me</button>

<script>
    let count = localStorage.getItem('count') || 0;
    function limitClick() {
        if (count < 2) {
            count++;
            localStorage.setItem('count', count);
            alert('You have clicked this button ' + count + ' times');
        } else {
            document.getElementById('clickButton').disabled = true;
            alert('You have reached the limit of clicking this button!');
        }
    }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<button id="clickButton" onclick="limitClick()">Click Me</button>

<script>

let count = localStorage.getItem('count') || 0;

function limitClick() {

if (count < 2) {

count++;

localStorage.setItem('count', count);

alert('You have clicked this button ' + count + ' times');

} else {

document.getElementById('clickButton').disabled = true;

alert('You have reached the limit of clicking this button!');

}

}

</script>

赞(312) 打赏

版权声明：本文采用知识共享署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称：《HTML如何限制按钮点击次数并且刷新页面不重置点击量》
文章链接：https://www.machunjie.com/setup/1431.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。

分享到

马春杰杰 

好好学习，天天向上。加油！！！TG群

相关推荐

评论抢沙发

马春杰杰博客始建于2017年6月14日，博客主要分享网站建设中遇到的问题及解决方案、自己在读书过程中的心得体会及分享一些自觉有意义的音视频内容，记录些生活中的琐事，希望博客能督促怠惰的自己不断学习，不断进步。

精彩直达

友情链接视频解析简历生成表白网页联系我们给我留言

5 + 6 = ?

私密评论

:smile:

:sad:

:cool:

:confused:

:cry:

:eek:

:evil:

:exclaim:

:idea:

:lol:

:mad:

:mrgreen:

:neutral:

:question:

:razz:

:redface:

:rolleyes:

:surprised:

:wink:

:biggrin:

:twisted: