js怎么做H5 进度条，进度满了跳转到下个页面

在JavaScript中制作H5进度条通常涉及HTML、CSS和JavaScript的结合。下面是一个简单的步骤说明：

1. **HTML结构**:

<div id="progress-bar">
  <div class="progress" style="width:0%;"></div>
  <span id="percentage">0%</span>
</div>
<a href="#next-page" class="button" id="next-btn" style="display:none;">Next</a>

这里的`<div>`用于进度条，`.progress`表示实际的滑动部分，`#percentage`显示百分比。

2. **CSS样式**:

.progress {
  background-color: #ccc;
  height: 20px;
  width: 0%;
}

.button {
  display: none;
}

隐藏初始的“Next”按钮，并调整进度条样式。

3. **JavaScript处理**:

var progressBar = document.querySelector('.progress');
var percentage = document.getElementById('percentage');
var nextBtn = document.getElementById('next-btn');

function updateProgress(progress) {
  progressBar.style.width = progress + '%';
  percentage.textContent = progress + '%';
  if (progress === '100%') {
    nextBtn.style.display = 'block';
  }
}

// 假设有一个计数器或者异步操作，每完成一定比例就调用updateProgress
// 比如模拟进度变化：
setInterval(function() {
  // 0-99%，每次增加1%
  var currentProgress = Math.floor(Math.random() * 100);
  if (currentProgress == 100) {
    // 当进度满时，显示并绑定事件处理
    nextBtn.style.display = 'block';
    nextBtn.addEventListener('click', function() {
      window.location.href = '#next-page'; // 跳转到下一页
    });
  } else {
    updateProgress(currentProgress);
  }
}, 1000); // 每秒更新一次进度

这只是一个基础示例，实际应用中可能会有更复杂的交互效果和错误处理。