如何调整Intro.js步骤计数器：跳过介绍步从1开始计数？

要实现你的需求——第一步隐藏计数器，从第二步开始显示1/2、2/2的编号，同时按需控制计数器显示，有两种实用方法：

方法一：通过事件动态修改（简单快捷） #

保留默认计数器的基础结构，在步骤切换时动态修改内容和显示状态：

this.introJS.setOptions({
  nextLabel: 'Next',
  prevLabel: 'Prev',
  showStepNumbers: true,
  stepNumbersOfLabel: '/', 
  steps: [
    {
      title: 'MyTitleIntro',
      intro: 'MyIntrod description, without steps progress counter'
    },
    {
      element: '#step1',
      title: 'First Step',
      intro: 'Should be 1/2'
    },
    {
      element: '#step2',
      title: 'Second Step',
      intro: 'Should be 2/2'
    }
  ]
})
// 监听步骤切换前的事件，调整计数器
.onbeforechange(function(targetElement, stepIndex, stepItem) {
  const stepNumberEl = document.querySelector('.introjs-stepnumber');
  if (!stepNumberEl) return;

  if (stepIndex === 0) {
    // 第一步隐藏计数器
    stepNumberEl.style.display = 'none';
  } else {
    // 计算有效步骤总数（去掉第一步介绍）
    const totalValidSteps = this._options.steps.length - 1;
    // 当前有效步骤编号：stepIndex从0开始，第二步对应1，第三步对应2
    const currentValidStep = stepIndex;
    // 更新计数器文本
    stepNumberEl.textContent = `${currentValidStep}${this._options.stepNumbersOfLabel}${totalValidSteps}`;
    stepNumberEl.style.display = 'block';
  }
});

方法二：自定义步骤模板（完全可控） #

如果需要调整计数器的样式或位置，可以重写步骤的HTML模板，精准控制每个步骤的显示逻辑：

this.introJS.setOptions({
  nextLabel: 'Next',
  prevLabel: 'Prev',
  showStepNumbers: false, // 关闭默认计数器，用自定义模板实现
  stepNumbersOfLabel: '/', 
  // 自定义步骤模板函数
  stepTemplate: function(stepItem, stepIndex, stepsLength) {
    const validTotalSteps = stepsLength - 1;
    let counterHtml = '';

    // 仅在第二步及以后显示计数器
    if (stepIndex > 0) {
      const currentValidNum = stepIndex;
      counterHtml = `<div class="introjs-stepnumber">${currentValidNum}${this._options.stepNumbersOfLabel}${validTotalSteps}</div>`;
    }

    // 返回完整的步骤HTML结构，保留默认样式
    return `
      <div class="introjs-tooltip-header">
        <div class="introjs-tooltip-title">${stepItem.title}</div>
        ${counterHtml}
        <button class="introjs-skipbutton">Skip</button>
      </div>
      <div class="introjs-tooltiptext">${stepItem.intro}</div>
      <div class="introjs-tooltipbuttons">
        <button class="introjs-button introjs-prevbutton">${this.prevLabel}</button>
        <button class="introjs-button introjs-nextbutton">${this.nextLabel}</button>
      </div>
    `;
  },
  steps: [
    {
      title: 'MyTitleIntro',
      intro: 'MyIntrod description, without steps progress counter'
    },
    {
      element: '#step1',
      title: 'First Step',
      intro: 'Should be 1/2'
    },
    {
      element: '#step2',
      title: 'Second Step',
      intro: 'Should be 2/2'
    }
  ]
});

进阶：按需控制任意步骤的计数器 #

如果后续需要给某些步骤单独开启/关闭计数器，可以给步骤添加自定义属性showCounter，再在事件中判断：

this.introJS.setOptions({
  nextLabel: 'Next',
  prevLabel: 'Prev',
  showStepNumbers: true,
  stepNumbersOfLabel: '/', 
  steps: [
    {
      title: 'MyTitleIntro',
      intro: 'MyIntrod description, without steps progress counter',
      showCounter: false // 标记不显示计数器
    },
    {
      element: '#step1',
      title: 'First Step',
      intro: 'Should be 1/2',
      showCounter: true
    },
    {
      element: '#step2',
      title: 'Second Step',
      intro: 'Should be 2/2',
      showCounter: true
    }
  ]
})
.onbeforechange(function(targetElement, stepIndex, stepItem) {
  const stepNumberEl = document.querySelector('.introjs-stepnumber');
  if (!stepNumberEl) return;

  if (stepItem.showCounter === false) {
    stepNumberEl.style.display = 'none';
  } else {
    // 统计所有需要显示计数器的步骤总数
    const totalValidSteps = this._options.steps.filter(step => step.showCounter !== false).length;
    // 统计当前是第几个需要显示计数器的步骤
    const currentValidStep = this._options.steps.slice(0, stepIndex + 1).filter(step => step.showCounter !== false).length;
    stepNumberEl.textContent = `${currentValidStep}${this._options.stepNumbersOfLabel}${totalValidSteps}`;
    stepNumberEl.style.display = 'block';
  }
});

内容的提问来源于stack exchange，提问作者Marco24690