Создание обратного отсчета в HTML/JS
Я создал простую тестовую страницу для таймера, который отсчитывает от 10 до 0. Должна быть полоса и текст, показывающий прогресс. Поэтому я создал эту страницу:
<html>
<head>
</head>
<body>
<script>
function ProgressCountdown(timeleft, bar, text) {
return new Promise((resolve, reject) => {
var countdownTimer = setInterval(() => {
timeleft--;
document.getElementById(bar).value = timeleft;
document.getElementById(text).textContent = timeleft;
if (timeleft <= 0) {
clearInterval(countdownTimer);
resolve(true);
}
}, 1000);
});
}
</script>
<div>
<div>
<progress value = "10" max = "10" id=pageBeginCountdown"></progress>
<p> Beginning in <span id=pageBeginCountdownText">10 </span> seconds</p>
</div>
</div>
</body>
</html>
Он не работает, ни полоса, ни текст не сдвигаются с места. Где я неправ? Страница находится по адресу https://geheimbund.ddnss.de/test.html — я отлаживаю это часами, но никак не могу заставить его работать. Был бы супер-благодарен за любую помощь.
Я пробовал все, что мог придумать. Я ожидаю, что это сработает, т.е. полоса и текст должны отсчитываться до 0.
в вашем коде нет элементов с идентификатором bar или text
Отвечает ли это на ваш вопрос? Как написать таймер обратного отсчета на JavaScript?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Основываясь только на опубликованном коде, вам понадобится событие, которое запускает вашу функцию. Кроме того, как уже отмечалось, переменные функций не определены.
window.addEventListener('load', () => {
ProgressCountdown();
});
Спасибо - я думал, что событие будет автоматически запускаться при загрузке. Виноват. Я добавил ваш четный обработчик. Спасибо
Как теперь лучше всего определить переменные? Внутри функции или вне функции?
Примите мой ответ (нажав «галочку»), если он решил проблему, которую вы опубликовали, чтобы другие могли извлечь из этого пользу. Что касается переменных «bar» и «text», они тоже где-то в вашем коде? Если да, то не могли бы вы добавить его в пост?
Нет, я использую их только здесь. Я поставил галочку :-)
но что делает document.getElementById(bar).value = timeleft; вызов? Поле ввода в вашем html файле? Я бы предложил опубликовать еще один вопрос с вашим конкретным сомнением, но вы можете сначала объявить их (var bar; var text;), а затем присвоить им определенное значение через вашу функцию.
Глядя на ваш код и веб-сайт, я не вижу, что запускает функцию ProgressCountdown для запуска