jquery - 使用 jquery 显示 10 秒内的点击次数

Question

我正在尝试开发这个游戏，它需要用户快速单击一个按钮，我的秒数设置为 10，计时器仅在您单击按钮时开始，有一个显示结果的按钮，在 10 秒后总数应该弹出。

我的问题是我似乎无法获得正确的增量，并且在计时器完成后点击仍然会注册，这是它不应该做的。我需要帮助。

$(document).ready(function() {
    $('#total').hide();
    var sec = 10;
    $('.setthis').click(function() {
        var timer = setInterval(function() {
            sec = sec - 1;
            if (sec > 0) {
                $('#target').click(function() {
                    $('#total').html(function(i, val) {
                        return val * 1 + 1
                    });
                })
            }
            if (sec == 0) {
                $('#total').show();
                clearInterval(timer);
            }
        }, 1000);
    })
    $('#showme').click(function() {
        $('#total').show();
    })
});

Answer 1

这是我用 JavaScript 制作的完整游戏

<div id="displayTime"></div>

<script type="text/javascript">
var clicks = 0;var counterTicks=0;
var timer1 = setInterval(function(){myTimer()},1000);
function myTimer()
{
counterTicks++;
document.getElementById("displayTime").innerHTML="Timer:"+counterTicks;
if(counterTicks>=10){
window.clearInterval(timer1);
alert("Your total Clicks - "+clicks);
}
}
</script> 


<input value="Click" type="button" onclick="clicks++;">

您正在使用简单的 JavaScript 实现这一点 :)

Answer 2

每次单击按钮时，您都在设置不正确的间隔。您应该设置一次间隔（在第一次单击时），然后用它来标记 10 秒的结束。

尝试以下操作：

$('#total').hide();
var clicks = 0;
var timerSet = false;
var timerDone = false;
$('#setthis').click(function () {
    if (!timerSet) {
        timerSet = true;
        setInterval(function () {
            timerDone = true;
        }, 10000);
    }
    if (!timerDone) {
        clicks++;
        $('#total').text(clicks);
    }

});
$('#showme').click(function () {
    $('#total').show();
});

见工作小提琴