Javascript HTML：如何让多个计时器合并

我正在根据用户输入构建一个计时器。下面是代码应该如何工作： 用户输入： 时间：30秒

休息时间：10秒

套数：4套

每套练习次数：5次

在两组之间休息：30秒

通过上述用户输入，计时器将执行以下操作：

希望这对它应该做的事情有意义。我目前正在尝试在两组之间实现其余部分。有人知道我如何用我的代码实现这一点吗另外，totalTime已经包括了如果有帮助的话，两组之间的剩余时间将增加的时间量。

var numsets=document.getElementById（“userInput1”）；
var numex=document.getElementById（“userInput2”）；
var numwork=document.getElementById（“userInput3”）；
var numrest=document.getElementById（“userInput4”）；
var numrestafterset=document.getElementById（“userInput5”）；
var集；
var OGtimeon；
var-OGtimeoff；
var总时间；
var剩余时间；
var hasBeenStarted=false；//用于测试使用时间的布尔值
var isTimeON=true；
var-timeon；
var超时；
var时间剩余；
var剩余时间；
剩余价值；
变量集；
var准备；
var-OGExPS；
变量集；
var-ExercisePS；
风险值重启者；
var区间
var j=0；
var练习保持；
var重构；
//函数sleep（毫秒）{//我在网上找到的创建sleep函数的函数
//const date=date.now（）；
//让currentDate=null；
//做{
//currentDate=Date.now（）；
//}while（currentDate-日期<毫秒）；
//   }
//函数updateRest（）{
//如果（重新启动>0）{
//interval3=设置间隔（RestCount，1000）；
//     }
//否则{
//开始时间（）；
//     }
//函数RestCount（）{
//while（重启者！=0）{
//餐馆经营者--；
//     }
//j=0；
// }
函数updatePrep（）{
如果（hasBeenStarted==false）{
准备=5；
interval2=设置间隔（预计数，1000）；
}
否则{
开始时间（）；
}
}
函数PrepCount（）{
让秒数=parseFloat（Prepare）%60；
如果（准备==0）{
间隔时间（间隔2）；
开始时间（）；
}
否则{
PWR.innerHTML=“准备好！”；
textarea.innerHTML=准备；
控制台日志（准备）；
准备--；
}
}
函数startTime（）{
//在代码中设置值
OGsets=numsets.value；
OGtimeon=numwork.value；
OGtimeoff=numrest.value；
OGTOASets=numrestafterset.value；
OGExPS=numex.value；
timeon=（hasBeenStarted）？timeon剩余：OGtimeon；
timeoff=（hasBeenStarted）？timeoff剩余时间：OGtimeoff；
集合=（hasBeenStarted）？集合剩余：ogset；
ExercisePS=（已开始）？ExercisesRemaining:OGExPS；
RestAfterS=（hasBeenStarted）？restramining:OGTOASets；
//计时多少时间
//Var=（表达式）？true:false这基本上是一个if语句
totalTime=（hasBeenStarted）？剩余时间：（（parseFloat（OGtimeon）*parseFloat（sets）*parseFloat（ExercisePS））+（parseFloat（OGTOASets）*（parseFloat（sets）-1））+（parseFloat（OGtimeoff）*（parseFloat（sets）*（parseFloat（ExercisePS）-1））；
区间=（（parseFloat（集合）*parseFloat（ExercisePS））+（（parseFloat（集合）-1））+（（parseFloat（集合）*（parseFloat（ExercisePS）-1）））；
hasBeenStarted=true；
//启动计时器
间隔=设置间隔（更新计数，1000）；
}
函数updateCountdown（）{
intervalsleeft.innerHTML=间隔；
setsleet.innerHTML=集合；
var分钟=数学地板（总时间）/60）；
var秒=parseFloat（总时间）%60；
如果（秒<10）{
textareaRemaining.innerHTML=分钟+“：0”+秒；
}否则{
textareaRemaining.innerHTML=分钟+“：”+秒；
}
//更新时间开/时间关
if（isTimeON）{
PWR.innerHTML=“工作！”；
textarea.innerHTML=timeon；
时间--；
if（timeon==0）{
isTimeON=false；
timeon=OGtimeon；
间隔--；
intervalsleeft.innerHTML=间隔；
}
}
//下面是我被困的地方
否则{
textarea.innerHTML=timeoff；
暂停--；
PWR.innerHTML=“Rest！”；
if（timeoff==0）{
isTimeON=true；
timeoff=OGtimeoff；
j++；
间隔--；
intervalsleeft.innerHTML=间隔；
如果（j==xps）{
设置--；
//updateRest（）；
j=0；
}
}
}
如果（总时间==0）{
清除超时（间隔）；
hasBeenStarted=false；
控制台日志（套）；
设置--；
setsleet.innerHTML=集合；
PWR.innerHTML=“天哪，你完成了”；
}
总时间--；
}
函数updateRest（）{
如果（重新启动>0）{
interval3=设置间隔（RestCount，5000）；
}
否则{
开始时间（）；
}
}
函数RestCount（）{
while（重启者！=0）{
餐馆经营者--；
PWR.innerHTML=“设置休息！”；
textarea.innerHTML=RestAfterS；
}
j=0；
间隔时间（间隔3）；
}
函数停止（）{
剩余时间=总时间；
timeonreserving=timeon；
timeoff剩余=timeoff；
重新整理=重新整理；
练习维持=运动；
设置剩余=设置；
清除超时（间隔）；
//document.getElementById（“计数器”）.innerHTML=j；
}

p{
显示：内联flex；
对齐项目：居中；
}
标签{
浮动：左；
显示：块；
}
#用户输入1{
显示器：flex；
边缘底部：10px；
}
#用户输入2{
显示器：flex；
边缘底部：10px；
}
#用户输入3{
显示器：flex；
边缘底部：10px；
}
#用户输入4{
显示器：flex；
边缘底部：10px；
}
#用户输入5{
显示器：flex；
setTimeout(() => {
  console.log('Hello');
  setTimeout(() => {
    console.log('There');
  }, 1500);
}, 1000);

function logAfter(message, delay, callback) {
  setTimeout(() => {
    console.log(message);
    if (callback) callback();
  }, delay);
}

logAfter('Hello', 1000, () => {
  logAfter('There', 1500);
});

function logNAfter(message, times, delay, callback) {
  if (times === 0 && callback) {
    callback();
  }
  else {
    setTimeout(() => {
      console.log(message);
      logNAfter(message, times-1, delay, callback);
    }, delay);
  }
}

logNAfter('Hi There!', 3, 500, () => {
  logAfter('Goodbye!', 2000);
});

function logAfter(message, delay) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(message);
      resolve();
    }, delay);
  });
}

function logNAfter(message, times, delay) {
  if (times === 0) {
    return Promise.resolve();
  } else {
    return logAfter(message, delay)
      .then(() => logNAfter(message, times-1, delay));
  }
}

logAfter('Hello', 1000)
  .then(() => logAfter('There', 1500));

logNAfter('Hi There!', 3, 500)
  .then(() => logAfter('Goodbye!', 2000));

async function logAfter(message, delay) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(message);
      resolve();
    }, delay);
  });
}

async function logNAfter(message, times, delay) {
  for (let i = 0; i < times; ++i) {
    await logAfter(message, delay);
  }
}

async function demoSequence1() {
  await logAfter('Hello', 1000);
  await logAfter('There', 1500);
}

async function demoSequence2() {
  await logNAfter('Hi There!', 3, 500);
  await logAfter('Goodbye!', 2000);
}

<!DOCTYPE html>
<html>
<style>
  td, th {
    text-align: left;
    padding: 8px;
  } 
</style>


<head>
  <title>Timer</title>
</head>


<body>
<!-- Inputs -->
<h2>Inputs</h2>
  <p>
    <label for="sets-input">Number of Sets: </label>
    <input type="number" id="sets-input" min="1" max="3600">
  </p>
  <p>
    <label for="exercises-input">Number of Exersizes per Set: </label>
    <input type="number" id="exercises-input" min="1" max="3600">
  </p>
  <p>
    <label for="workout-input">Exersise Time:  </label>
    <input type="number" id="workout-input" min="1" max="3600">
  </p>
  <p>
    <label for="exersiseRest-input">Rest between exersises: </label>
    <input type="number" id="exersiseRest-input" min="1" max="3600">
  </p>
  <p>
    <label for="setRest-input">Rest between Sets: </label>
    <input type="number" id="setRest-input" min="1" max="3600">
  </p>

<!-- Buttons -->
<p>
  <button id="start-button">Start</button>
  <button id="reset-button">Reset</button>
</p>


<!-- Timer Display  -->
  <h2>Outputs:</h2>
  <table>
    <tr>
      <th>Total Time Remaining: </th>
      <td id="timer-display">???</td>
    </tr> 
    <tr>
      <th>Set Number: </th>
      <td id="set-display">???</td>
    </tr> 
    <tr>
      <th id="label-display">???</th>
      <td id="labelTimer-display">???</td>
    </tr> 
    
  </table>

  <script src="tabada.js"></script>
</body>


</html>

//-----------------------------------------------------------------------------------------------
// GLOBAL VARIABLES
//-----------------------------------------------------------------------------------------------

// HTML
var setsInput = document.getElementById("sets-input");
var exersisesInput = document.getElementById("exercises-input");
var workoutInput = document.getElementById("workout-input");
var exersiseRestInput = document.getElementById("exersiseRest-input");
var setRestInput = document.getElementById("setRest-input");

var timerDisplay = document.getElementById("timer-display");
var setDisplay = document.getElementById("set-display");
var labelDisplay = document.getElementById("label-display");
var labelTimerDisplay = document.getElementById("labelTimer-display");

var startButton = document.getElementById("start-button");
var resetButton = document.getElementById("reset-button");

// JavaScript
var sets = 2;
var exersises = 3;
var workout = 5;
var exersiseRest = 2;
var setRest = 3;

var totalTime = -1;
var myInterval = -1;
var tabadaArray = [];
var tabadaIndex = 0;


//-----------------------------------------------------------------------------------------------
// BUTTON FUNCTIONS
//-----------------------------------------------------------------------------------------------

// Start / Pause Button
startButton.addEventListener("click", function(event){

  // Set up Tabada Timer
  if (totalTime == -1){
    collectInputs();        // Comment this line for testing without inputs
    calculateTotalTime();
    createTabadaArray();
  }

  // Start timer
  if (myInterval == -1){
    startButton.innerHTML = "Pause";
    myInterval = setInterval(tabadaTimer, 1000);
  }

  // Pause timer
  else{
    startButton.innerHTML = "Start";
    clearInterval(myInterval);
    myInterval = -1
  }
});


// Reset Button
resetButton.addEventListener("click", function(event){
  
  // Stop Timer
  clearInterval(myInterval);   
 
  // Refresh Timer Display
  calculateTotalTime(); 
  updateOutputs(totalTime, 1, 'Workout', workout);               
  totalTime=-1;  // Alows user to change input values before clicking start button.

  // Reset start / pause button
  myInterval = -1;                  
  startButton.innerHTML = "Start"; 
});


//-----------------------------------------------------------------------------------------------
// SETUP FOR TABADA TIMER
//-----------------------------------------------------------------------------------------------

function collectInputs(){
  sets = parseFloat(setsInput.value);
  exersises = parseFloat(exersisesInput.value);
  workout = parseFloat(workoutInput.value);
  exersiseRest = parseFloat(exersiseRestInput.value);
  setRest = parseFloat(setRestInput.value);
}

function calculateTotalTime(){
  let totalWorkoutTime = workout * exersises * sets;
  let totalExersiseRest = exersiseRest * (exersises - 1) * sets;
  let totalSetsRest = setRest * (sets - 1);

  totalTime = totalWorkoutTime + totalExersiseRest + totalSetsRest;
}

function createTabadaArray() {
  tabadaIndex = 0;    // Global variable used for tabada timer
  tabadaArray = [];
  
  for( let set=1; set<=sets; set++ ){
    for( let exersise=1; exersise<=exersises; exersise++){

      // Workout
      addTimeBlock(set, 'Workout', workout);

      // Exersise Rest
      if ( exersise < exersises){
        addTimeBlock(set, 'Rest', exersiseRest);
      }

      // Set Rest
      else if( set < sets){
        addTimeBlock(set, 'Rest', setRest);
      }
      
      // Done
      else{break;}   // Very end exersize has no rest, so we must break the loop.
    }
  }
}

function addTimeBlock(set, label, labelTime) {

  // Add a sub timer to the array (workout, exersice rest, or set rest)
  for (let i=labelTime; i>0; i--) {
    tabadaArray.push({
      "totalTimeRemaining" : totalTime--,
      "set" : set,
      "label" : label,
      "labelTimeRemaining" : i,
    });
  }
}

//-----------------------------------------------------------------------------------------------
// TABADA TIMER
//-----------------------------------------------------------------------------------------------

function tabadaTimer(){
  // Still time left
  if (tabadaIndex < tabadaArray.length){
    let displayInfo = tabadaArray[tabadaIndex];
    updateOutputs(  displayInfo.totalTimeRemaining, 
                    displayInfo.set,
                    displayInfo.label,
                    displayInfo.labelTimeRemaining );
    tabadaIndex++;
  }

  // End of tabada timer
  else{
    clearInterval(myInterval);        // stop timer 
    updateOutputs(0, 1, 'Rest', 0);
    totalTime = -1
  }
}

function updateOutputs(totalTimeRemaining, setNumber, label, labelTimeRemaining){
  timerDisplay.innerHTML = convertSeconds(totalTimeRemaining);
  setDisplay.innerHTML = setNumber;
  labelDisplay.innerHTML = label;
  labelTimerDisplay.innerHTML = convertSeconds(labelTimeRemaining);
}

function convertSeconds(s){
  // Seconds -> mm:ss format 

  // Calculate
  let minutes = Math.floor(s/60);
  let seconds = s%60;

  // Format
  let formattedminutes = ("0" + minutes).slice(-2);
  let formattedseconds = ("0" + seconds).slice(-2);
  return formattedminutes + ':' + formattedseconds;
}