前端刻度条

前端刻度条可以通过CSS和JavaScript实现。以下是一个简单的示例：

HTML:

<div class="progress-bar">
  <div class="progress"></div>
</div>

CSS:

.progress-bar {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  background-color: #eee;
}

.progress {
  height: 100%;
  background-color: #00cc00;
}

JavaScript:

function updateProgress(progress) {
  var progressBar = document.querySelector('.progress');
  progressBar.style.width = progress + '%';
}

// 调用示例
updateProgress(50);

在上面的示例中，.progress-bar是整个刻度条的样式， .progress是实际的进度条样式。通过JavaScript的updateProgress函数，可以动态更新进度条的宽度来显示进度。