如何在每次标签更改时将计数器重置为1？

我有这个代码，它被认为是一个呼吸练习，计数如下:

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();

python矩阵横向相加

Python中的矩阵操作非常强大，其中横向相加也是其中一个重要的功能。在Python中，我们可以使用numpy库中的sum函数来实现这一功能。import numpy as np # 创建一个4行3列的矩阵 matrix = np.array([[1, 2

mysql数据库表清单

什么是MySQL数据库表清单？MySQL数据库表清单是指一个MySQL数据库中，所有数据表的一份详细清单。这个清单包含了数据库的名称、数据表的名称、数据表的列名和列数据类型、列属性、列的默认值、列是否为外键或主键等等。这列表可以通过使用MySQL自带的SHOW TABLES或

mysql查询怎么运行

MySQL是一款非常流行的关系型数据库管理系统，它的查询语句可以帮助我们轻松地从数据库中检索和筛选需要的数据。在使用MySQL进行查询时，查询语句的运行过程可以分为以下几个步骤：1. 客户端向MySQL服务器发送查询请求。 2. MySQL服务器接收到查询请求后，会

css增加上内框

CSS是一门用于控制网页呈现样式的语言。它可以定义元素的颜色、字体、大小、间距等，从而让网页更加美观。除了这些基本的样式属性，CSS还有一些高级属性，例如可以增加元素的内框。下面我们就来看一看如何使用CSS增加内框。.box { border: 1px solid

css导航栏内容间距

CSS导航栏是网站中很常见的一种组件，它让用户在页面上快速地找到想要的内容。但是，如果导航栏内容之间的间距不合适，就会影响用户的浏览体验。因此，如何调整导航栏内容间距是我们需要关注的问题。.nav { display: flex; justify-con

vue devtool debug

Vue Devtools是一款Vue.js的调试工具，可以直观地查看Vue组件的状态、计算属性、指令等。在调试Vue应用程序时，Vue Devtools可以成为您的好帮手。本文将重点介绍Vue Devtools的Debug功能。使用Debug功能，您可以在Vue Devtools

border边框渐变颜色，html怎么设置文本框前面文字颜色_CSS

1、border边框渐变颜色，html怎么设置文本框前面文字颜色？方法:1、利用style属性,添加“border:宽度样式颜色”样式设置文本框的边框颜色;2、利用style属性,添加“background:颜色”样式设置背景颜色;3、利用s

计算机的特点有哪些_java

计算机的特点有哪些？计算机的特点:1、运算速度快：计算机内部电路组成，高速准确地完成各种算术运算。当今计算机系统的运算速度已达到每秒万亿次，微机也可达每秒亿次以上，使大量复杂的科学计算问题得以解决。2、计算精度高：一般

ajax default

AJAX（Asynchronous JavaScript and XML）是一种用于创建交互式网页的技术。其中，AJAX default指的是AJAX请求中的默认设置。通过使用AJAX default，我们可以方便地设置全局的AJAX行为，从而简化代码并提高开发效率。本文将介绍AJAX def

css水平居中表示什么 - 前端老白

在网页设计中，水平居中是一种常见的样式需求。在CSS中，我们可以通过不同的方法来实现水平居中。下面我们来具体了解一下CSS水平居中的原理和实现方法。首先，CSS水平居中指的是一种布局样式，即让元素在容器中水平方向上居中显示。在实际开发中，我们通常会在一个容器中放置一个子元素，并希望子元素能够水平