Question

我正在尝试开发这款游戏，要求用户快速点击按钮，我的秒数设置为10，定时器仅在您点击按钮时启动，有一个show me按钮，只显示结果， 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

每次单击按钮，都会设置不正确的间隔。您应该设置一次间隔（在第一次单击时），然后使用它来标记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();
});

见工作fiddle

Answer 2

这是我用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实现了这一目标：）

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

2 个答案: