Как получить рабочий таймер обратного отсчета с помощью кнопки, которая добавляет 1 к счетчику после каждого нажатия

ProgramBox

Как получить рабочий таймер обратного отсчета с помощью кнопки, которая добавляет 1 к счетчику после каждого нажатия

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я настраиваю проект для класса, который мне нужен для использования 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>

Я ожидал, что таймер запустится, а счетчик увеличится на единицу, но ничего не происходит вообще.

1. Нет элемента с id=»button», который $("#button") ищет.

2. И вместо mousedown этого используйте on() (jQuery устарел ярлыки событий несколько лет назад) и click событие. Я искренне надеюсь, что ваш учитель не научил вас использовать это.

3. Если это ваш весь код, то score он не определен. Объявите это в глобальной области видимости, иначе ошибка.

Ответ №1:

Вам нужно:

Добавьте идентификатор к вашей кнопке:

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

Также вам необходимо определить переменные score amp; stop глобально вне функции:

     var score = 0;
    var stop =  0;

Ответ №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>

Ответ №3:

Вы используете в качестве селектора идентификатор, однако ваш элемент button не имеет этого идентификатора. Вы можете сделать следующее:

Добавьте идентификатор к этой кнопке.
Или вы можете изменить селектор следующим образом:

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

1. Я думаю, что это не единственная проблема. Потому что код все еще не работает.

2. @MaheerAli из OP: я ожидал, что таймер запустится, а счетчик увеличится на единицу , но ничего не происходит вообще . Теперь OP должен начать работать над своим подходом.

Ответ №4:

Из вашего html у вас не было id="button" , поэтому используйте name selector или назначьте id кнопке.

Как показано ниже.

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

Ответ №5:

Вы забыли инициализировать некоторые переменные и указать некоторые идентификаторы.

 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. Вы забыли инициализировать некоторые переменные и указать некоторые идентификаторы. << Ну, какие? Хороший ответ должен объяснить его решение. И, пожалуйста, не размещайте ссылки на скрипты. Вы можете просто создать фрагмент кода прямо здесь, в своем ответе.

2. Скрипка не нужна.