У меня есть проект, над которым я работаю, который получает время в секундах от группы блоков, введенных из формы ввода пользователя. HTML генерируется с использованием PHP и отображается через HTML после анализа через серию форм и циклов foreach.
Справочная информация о PHP
Я, честно говоря, не думаю, что это так важно для вопроса, но здесь есть шутка.
Это приложение для тренировок, которое я хочу использовать для отслеживания тренировок во время тренировок. Я вхожу в упражнение -> 25 секунд , затем введите период отдыха -> 7 секунд , затем сколько раз повторить цикл -> 10 раз, как долго отдых период между цепями -> 90 секунд , затем, сколько раз повторить схему -> 4 раза . Таким образом, у меня есть 25-секундное упражнение с 7-секундным отдыхом, это повторяется 10 раз, затем после десятого повторения я отдыхаю 90 секунд, затем повторяю цикл в общей сложности 4 раза.
Отлично работает PHP, проходит серию форм через циклы foreach, которые затем анализируют код в HTML, который отображает таблицу, как описано. Опять же, эта работа идеально, и у меня нет проблем там.
Теперь, когда у меня есть HTML со значениями, встроенными в код, когда они мне нужны. Я использую Java Сценарий, чтобы получить значения и затем запустить функцию времени.
JS:
Таймер выполняет итерацию по общему количеству секунд по группам, это setTimeout, это работает довольно хорошо. Он использует метод limit (), добавляя общую сумму к сумме групп за каждый тик, см. Код для справки.
В течение тайм-аута я хочу отсчитывать каждый блок секунд и отображать этот тайм-аут на странице вместе с парой звуковых триггеров, которые, я уверен, смогу выяснить, как только я отсортирую вложенный setInterval.
Текущий код, который у меня есть, кажется, как-то не синхронизирован c как-то, так как я замечаю, что счетчик блоков срабатывает не синхронно c с обратным отсчетом, также кажется, что обратный отсчет достигает 0 во всех остальных итерации по таймауту и не происходит обратного отсчета во всех других итерациях.
ПРИМЕЧАНИЕ ПО ДЛИТЕЛЬНОСТИ HTML КОДА: HTML все создается динамически и добавляется только для демонстрации функциональности кода JS! Пожалуйста, позвольте таймеру для анализа, чтобы увидеть отображаемый текст с JS. 30 секунд, 8 секунд и т. Д. c ...
Обратите внимание на несоответствие в журнале консоли и таймере с точки зрения вызова блока.
Наконец, я хочу, чтобы таймер отображался немедленно, а не после того, как первый блок помечает его группу секунд.
const repeatAmount = document.getElementById('repeat_amount').textContent;
const breakTime = document.getElementById('break_time').textContent;
const workoutTime = document.getElementById('workout_time').textContent;
const workoutAmount = document.getElementById('workout_amount').textContent;
const coolDown = document.getElementById('cool_down').textContent;
// calculate the seconds
const workout_total = workoutTime * workoutAmount;
const break_total = breakTime * workoutAmount;
const intval_total = workout_total + break_total;
const absolute_total = intval_total + coolDown;
const total = absolute_total * repeatAmount;
let clicker = workoutTime * 1000;
const timerEl = document.getElementById('timer');
const spans = [...document.querySelectorAll('.selector')];
const exercise = document.querySelectorAll('.exercise');
//console.log(exercise)
let i = 0;
spans.reduce((totalDelay, span) => {
const delay = parseInt(span.textContent);
totalDelay += delay;
setTimeout(() => {
const circuits = document.querySelectorAll('.exercise');
circuit = circuits[i].innerText;
let alt = circuits[i].attributes[0].textContent;
let time = delay;
console.log(alt)
console.log(`End of ${circuit} -> ${delay}`);
const interval = setInterval(() => {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
seconds = seconds < 10 ? '0' + seconds : seconds;
time--;
if (time >= 0) {
timerEl.innerHTML = `${alt} -> ${circuit} -> ${delay} = ${minutes}:${seconds}`;
}
if (time === 0) {
return interval;
}
}, 1000);
i++;
}, 1000 * totalDelay);
return totalDelay;
}, 0);
.hidden {
display: none;
}
<script src="https://kit.fontawesome.com/4a797c03a4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
<div id="timer"></div>
<!--Hold the timer-->
<div class="container">
<div id="timer"></div>
<!--Hold the timer-->
<!-- This HTML code is created DYNAMICALLY! -->
<div>
<div class="hidden" id="repeat_amount">4</div>
<div class="hidden" id="workout_amount">10</div>
<div class="hidden" id="break_time">8</div>
<div class="hidden" id="cool_down">90</div>
<div class="hidden" id="workout_time">30</div>
<h2>High Intensity Workout Training</h2>
<table class="table table-sm table-striped table-dark">
<tr>
<th colspan="2" scope="col">Time</th>
<th scope="col">Name</th>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Curls</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Curls</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Jump Rope</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Jump Rope</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Mountain Climbers</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Mountain Climbers</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Jump Rope</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Jump Rope</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Romanian Dead Lifts</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Romanian Dead Lifts</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Jump Rope</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Jump Rope</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Shoulder Shrugs</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Shoulder Shrugs</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Jump Rope</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Jump Rope</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Statue</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Statue</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr>
<td>
<i class="fas fa-dumbbell"></i> - <i><span alt="exercise" class="selector workout_time">30</span> seconds</i>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<b><span alt="Workout Time" class="workout_time exercise">Jump Rope</span></b>
</td>
</tr>
<tr>
<td>
<i class="fas fa-hourglass-end"></i> Break Time Interval for <b><span alt="Break Time" class="break_time exercise">Jump Rope</span></b>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Break Time" class="selector break_time">8</span> seconds </i>
</td>
</tr>
<tr class="table-dark">
<td>
<h3>Cool Down starts</h3>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<i><span alt="Cool Down Time" class="selector cool_down exercise">90</span> seconds</i>
</td>
</tr>
<tr class="table-info">
<td>
<h3>Total Time of Circuit Intervals</h3>
</td>
<td>
<i class="fas fa-long-arrow-alt-right"></i>
</td>
<td>
<h4><i><span class="cool_down"><b>31 Minutes - 20 Seconds - 1880</b></span></i></h4>
</td>
</tr>
</table>
</div>
</div>
</div>