连续点击按钮触发函数

一个W牛

于 2024-03-21 11:28:52 发布

阅读量280

点赞数 3

文章标签：前端 javascript html jquery

本文链接：https://blog.csdn.net/qq_45587547/article/details/136903265

版权

文章介绍了如何在HTML和JavaScript中设计一个小功能，当用户快速连续点击一个按钮时，只有在1秒内点击5次才会触发警告。通过事件监听和计数器实现这一效果，阻止了默认行为。

摘要由CSDN通过智能技术生成

有一个很重要按钮，点击它可能出现可怕的事情，但有时又不得不点击，这时你就可以给这个按钮添加一些小bug，让1秒内连续点击5次才能触发它，是不是很神奇，这个小功能貌似没有一点用

1、html部分

 <a class="btn btn-success" id="importExcelBtn">
    <i class="fa fa-spinner"></i> 连续点击
 </a>

2、js部分

 $(document).ready(function () {
        var clickCount = 0;
        var maxClicks = 5;//需要连续点击的次数
        var button = $('#importExcelBtn');
        var firstClickTime = null;
        var clickInterval = 1000; // 1秒

        button.on('click', function (e) {
         e.preventDefault(); // 阻止链接的默认行为
            var currentTime = new Date().getTime();
            if (firstClickTime === null) {
                // 如果是第一次点击，则记录时间
                firstClickTime = currentTime;
            } else if (currentTime - firstClickTime <= clickInterval) {
                // 如果是在一秒钟内点击的，则增加点击次数
                clickCount++;
                if (clickCount === maxClicks) {
                    // 执行同步操作
                   alert('你成功了哎')
                    // 重置点击计数和首次点击时间
                    clickCount = 0;
                    firstClickTime = null;
                }
            } else {
                // 如果超过一秒钟，则重置点击计数和首次点击时间
                clickCount = 1; // 重置为1，因为用户已经点击了一次
                firstClickTime = currentTime;
            }
        })
    });