我从零开始创造它。如果你有任何问题，请尽管问。

const previous = document.querySelector('.previous');
const next = document.querySelector('.next');
const progress = document.querySelector('.progress');

let counter = 0;

next.addEventListener('click', function(){
    if(counter <= 35){
        progress.innerHTML += "⚫";
        counter++;
    }
})

previous.addEventListener('click', function(){
    if(counter > 0){
        const textNode = progress.firstChild;
        textNode.data = textNode.data.slice(0, -1);
    }
})

.progress{
    height: 25px;
    border: 1px solid blue;
    width: 100%;
    margin-bottom: 10px;
}

<div class="progress"></div>
<button class="previous">Previous</button>
<button class="next">Next</button>

要创建一个点样式的进度条，您可以使用Bootstrap的flexbox并在容器中创建一系列点。每个点代表调查中的一个步骤，您可以动态更新点的类以显示进度。试试这个代码。

let currentStep = 0; // We start from 0 because it's the first step

function updateProgressDots() {
  const progressDots = document.querySelectorAll('.progress-dot');
  for (let i = 0; i < progressDots.length; i++) {
    if (i < currentStep) {
      progressDots[i].classList.add('active');
    } else {
      progressDots[i].classList.remove('active');
    }
  }
}

function moveToNextStep() {
  currentStep++;
  // Ensure currentStep doesn't exceed the number of progress dots
  const progressDots = document.querySelectorAll('.progress-dot');
  currentStep = Math.min(currentStep, progressDots.length);
  updateProgressDots();
}

// Add event listener to the "Next" button
const nextButton = document.getElementById('nextButton');
nextButton.addEventListener('click', moveToNextStep);

.progress-dot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 200px; /* Adjust the width as per your preference */
  height: 20px; /* Adjust the height as per your preference */
  background-color: #f1f1f1; /* Adjust the background color if needed */
  border-radius: 10px; /* To make the container rounded */
}

.progress-dot {
  width: 10px; /* Adjust the dot size as per your preference */
  height: 10px; /* Adjust the dot size as per your preference */
  border-radius: 50%;
  background-color: #007bff; /* Adjust the dot color as per your preference */
}

/* Add a class to highlight the progress */
.progress-dot.active {
  background-color: #00ff00; /* Change the color to indicate active progress */
}

<div class="container mt-5">
    <div class="progress-dot-container">
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
      <div class="progress-dot"></div>
      <!-- Add more progress dots for each step in your survey -->
    </div>

    <button id="nextButton"">Next</button>
  </div>