Question

我正在为需要使用jquery的类建立一个项目。我已经确定了一个项目，在该项目中您将单击按钮，计数器将增加一个，并且计时器将启动。这就像一个游戏，可以了解您在10秒内可以点击多快。

$("#button").mousedown(function () {
score = score + 1;
startTimer();
});

function startTimer() {
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
    }, 1000);
}
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clicks">
   <p><span>0</span></p>
</div>
<div class="boxtext">
   <p>Time Remaining: <span>10</span> Seconds </p>
</div>
<div class="but">
   <button type="button" name="button">Click</button>
</div>

我希望计时器启动，计数器增加一，但是什么也没发生。

Answer 1

您需要：

为按钮添加ID：

<button id="button" type="button" name="button">Click</button>

此外，您还需要在函数外部全局定义score和stop变量：

    var score = 0;
    var stop =  0;

Answer 2

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){

var score=0;
var stop=0;
var counter = 0;
var endscore=0;
$("button").mousedown(function () {

score = score + 1;
$("#score").text(score);
startTimer();
});

function startTimer() {
if (stop === 0) {
stop = stop + 1;
var interval = setInterval(function () {
    counter++;
    display = 60 - counter;
   // $("button").html("Click! (" + display + " secs)");
    if (counter == 60) {
        alert("Times up!");
        clearInterval(interval);
        stop = 0;
        endscore = score;
        score = 0;
    }
    $('#timeRemaining').text(display);
}, 1000);
}
};
});
</script>
</head>
<body>
<div class="clicks">
<p><span id="score">0</span></p>
</div>
<div class="boxtext">
<p>Time Remaining: <span id="timeRemaining">60</span> Seconds </p>
</div>
<div class="but">
<button type="button" name="button">Click</button>
</div>
</body>
</html>

Answer 3

您正在使用ID作为选择器，但是您的按钮元素没有该ID。您可以执行以下操作：

将id添加到该按钮。
或者，您可以将选择器更改为：

    $(".but").mousedown(function() { // or $('button[name="button"]').mousedown(function() {...});
      score = score + 1;
      startTimer();
    });

Answer 4

在您的html中，您没有id="button"，因此请使用名称选择器或为按钮分配ID。

像下面一样。

$("input[name='button']").mousedown(function() {
  score = score + 1;
  startTimer();
});

Answer 5

您忘记初始化一些变量并提供一些ID。

var score = 0
var stop = 0

$("#button").click(function () {
score = score + 1;
startTimer();
});

function startTimer() {
console.log('start timer')
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
    console.log('#interval')
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
        
        $('#counter').html(counter)
    }, 1000);
}
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clicks">
        <p><span id="counter">0</span></p>
      </div>
      <div class="boxtext">
        <p>Time Remaining: <span>10</span> Seconds </p>
      </div>
    </div>
    <div class="but">
      <button type="button" id="button">Click</button>
    </div>

如何使用每次点击后为按钮添加+1的按钮来获得一个有效的倒计时计时器

5 个答案: