首页 > 解决方案 > 尝试使用 JavaScript 来实现它,但脚本似乎有问题

问题描述

目标是在不到 1 分钟内按下 10 次按钮关闭,但如果在 1 分钟内未按下 10 次则继续计数?所以只有在 1 分钟内按下 10 次时才会禁用。您可以在一分钟内单击 9 次,但除了第十次按钮关闭之外什么也没有发生,但是如果一分钟过去了,您可以继续单击,但始终最多单击十次,并且计数器不会重置但会继续增加数量。

let accCounter = 0;
let totalCount = 0;

document.getElementById('totalCounter').innerText = totalCount;

document.getElementById('clap').onclick = function() {
    const clap = document.getElementById('clap');
    const clickCounter = document.getElementById("clicker");
    upClickCounter();

    function upClickCounter() {
      const clickCounter = document.getElementById("clicker");
      const totalClickCounter = document.getElementById('totalCounter');


      accCounter++;
      clickCounter.children[0].innerText = '+' + accCounter;
      totalClickCounter.innerText = totalCount + accCounter;

}
}
      var endCount = 5; // 5 for testing - this would be 10
      var interval = 5000 // 5s for testing, 1 min= 1000 * 60;
      var clicks = [];
      var totalClicks = 0;

      $("#btn").click(function() {
        clicks.push(Date.now());
        totalClicks++;
        checkIt();

      })

      function checkIt() {
        //if (clicks.length < endCount) return;

        while (clicks.length && (Date.now() - clicks[0]) > interval) {
          console.log("removing: " + ((Date.now() - clicks[0]) / 1000))
          clicks.shift();
        }

        if (clicks.length < endCount) return;

        $("#btn")[0].disabled = true;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="clap" class="clap-container"></button>
<div id="totalCounter" class="total-counter"></div>
<div id="clicker" class="click-counter"></div>

标签: javascripthtmlcssbuttonclick

解决方案


推荐阅读