我有這個代碼，它被認為是一個呼吸練習，計數如下:

8 second inhale 
8 second "hold inhale"
12 second "exhale"
8 second "hold exhale"

除了計數器將遞增而不重置為1之外，一切都工作正常。它應該是例如1到8，然后又是1到8，然后是1到12，等等。

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = count;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

對當前動作的計數和整個周期的長度使用不同的變量。

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  label.textContent = 'Inhale';
  var count = 1;
  var segcount = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = segcount;

    if (count == 8) {
      label.textContent = 'Pause Inhale';
      segcount = 0;
    } else if (count == 16) {
      label.textContent = 'Exhale';
      segcount = 0;
    } else if (count == 28) {
      label.textContent = 'Pause Exhale';
      segcount = 0;
    }

    // Increment count
    count++;
    segcount++;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

您應該添加另一個變量來保存每個步驟計數器，就像這樣。

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 0;
  // Variable 'stepCount' to hold each step counter
  var stepCount = 0;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label


    if (count === 0) {
      label.textContent = 'Inhale';
    } else if (count === 8) {
      // reset stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Inhale';
    } else if (count === 16) {
      // reset stepCount to 0
      stepCount = 0;
      label.textContent = 'Exhale';
    } else if (count === 28) {
      // reset stepCount to 0
      stepCount = 0;
      label.textContent = 'Pause Exhale';
    }
    
    // Increment count
    count++;
    // Increment stepCount
    stepCount++;
    //You show here the counter
    timer.textContent = stepCount;

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 36) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

您可以使用有限狀態機(https://en . Wikipedia . org/wiki/有限狀態機):

// Function to start the timer
function startTimer() {

  const timer = document.getElementById('timer');
  const label = document.getElementById('label');
  let count = 1;
  
  const states = Object.entries({
    'Inhale': 8, 
    'Pause Inhale': 8, 
    'Exhale': 12, 
    'Pause Exhale': 8
  }).map(([label, duration]) => ({label, duration}));
  let state = 0;
 
  const syncUI = () => {
    label.textContent = states[state].label;
    timer.textContent = count;
  };
  
  syncUI();
  
   // Interval for the timer
  return interval = setInterval(function() {

    // Increment count
    count++;

    // Update the timer display and label
    timer.textContent = count;

    if (count > states[state].duration) {
      state++;
      if(state === states.length){
        state = 0;
      }
      count = 1;
      syncUI();
    }

  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 18px;
}

<h1>Special Timer</h1>
<p id="timer"></p>
<p id="label"></p>

代碼完全按照您告訴它的去做(當然總是這樣)，因為您的代碼中沒有告訴顯示的計數要重置。實現這一點的一種方法是使用一個名為displayedCo unt的單獨計數，當隱藏計數達到特定數值時，該計數會重置，如下所示:

// Function to start the timer
function startTimer() {
  var timer = document.getElementById('timer');
  var label = document.getElementById('label');
  var count = 1;
  var displayedCount = 1;

  // Interval for the timer
  var interval = setInterval(function() {
    // Update the timer display and label
    timer.textContent = displayedCount;

    if (count <= 8) {
      label.textContent = 'Inhale';
    } else if (count <= 16) {
      label.textContent = 'Pause Inhale';
    } else if (count <= 28) {
      label.textContent = 'Exhale';
    } else if (count <= 36) {
      label.textContent = 'Pause Exhale';
    }

    // Increment count
    count++;
    if (count === 9 || count === 17 || count === 29 || count === 37) {
      displayedCount = 1;
    } else {
      displayedCount++;
    }

    // Stop the timer after reaching 8, 8, 12, 8 pattern
    if (count === 45) {
      clearInterval(interval);
      startTimer();
    }
  }, 1000); // 1000 milliseconds = 1 second
}

// Start the timer initially
startTimer();