javascript - 尝试使用 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>
解决方案
推荐阅读
- java - Jakarta/Java EE 兼容性如何工作?
- pdfkit - SwiftUI UIViewRepresentable PDFKit PDFView AttributeGraph:通过属性检测循环
- javascript - 如何在不使用键的情况下显示所有 JSON 键和值
- c - C:我对堆和堆栈分配细节的理解是否正确?
- css - 将元素推出流而不使用引导程序进行水平滚动
- rust - 如何正确注释生命周期
- c# - 获取部分图像 EmguCV/C# 的轮廓
- python - 如何在 Python 循环中将一个文件的内容附加到多个文件中?
- java - 为什么实际参数列表和形式参数列表的长度不同时会出现错误?
- .net-core - 使用 .Net 5 WebAPI 的 Vue SPA 的正确 OIDC 流程是什么?