Question

我真的很喜欢HTML，我正在尝试进度条并观看很多教程。我已经制作了一个进度条，我看到了如何使用JavaScript从0加载到100。但我想做出以下的事情。我有一个包含大量教程的页面，以便人们学习中文。完成每个教程后，我想让进度条跳过，比如说5％。我的想法是，在本教程结束时，我可以单击“下一步”并以5％递增进度条。我知道我需要让它与我的onClick进行交互以获得下一个教程，但我不知道如何做到这一点。有任何想法吗？这是我的进度条：

<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
      40%
    </div>

我的onClick在一个单独的html文件中：

<div class="w3-display-bottommiddle">Page 1/8</div>
    <div class="downrightbtn">
      <button class="next" onclick="page2()">Next</button>
    </div>
  </div>

我从另一个stackoverflow主题看到以下答案，但我不知道如何使用它：

$('.progress-bar').css('width', percentageCompleted + '%')

这里我们有onClick，但它会将进度条从0加载到100.如果可以将它设置为10％，之后当我们完成第二个教程将其增加到20％时？

function start(al) {
  var bar = document.getElementById('progressBar');
  var status = document.getElementById('status');
  status.innerHTML = al + "%";
  bar.value = al;
  al++;
  var sim = setTimeout("start(" + al + ")", 1);
  if (al == 100) {
    status.innerHTML = "100%";
    bar.value = 100;
    clearTimeout(sim);
    var finalMessage = document.getElementById('finalMessage');
    finalMessage.innerHTML = "Process is complete";

Answer 1

只需调用带有“start（10）”的函数，加载从10到100，如果你想从20％开始已加载使用“start（20）”，则在第一个进度条加载后启动下一个视频进度条？如果是这种情况，您可以在函数末尾调用“start（20）”。

进度条与互动的进展

1 个答案: