javascript - 如何显示指示平均值的进度条

Question

我正在构建一个网站，并希望显示一个进度条，指示我从 html 表单中获得的所有输入数字的平均值。

我确实有使用 javascript 的经验。我有我的 Html 和 css 代码，但我需要 javascript 代码。

<div class="">
   <h3 class="card-header">Notes</h3>
      <div class="card-body">
         <div class="alert alert-warning" role="alert">
             Note: Please introduce the grade of the courses from 0 to 20
             </div>
             <div class="form-group row">
                <label class="col-12 col-sm-4 col-form-label text-sm-right">Math:</label>
                <div class="col-12 col-sm-8 col-lg-3">
                    <input id="math" type="number" required="" name="math" class="form-control" min="0" max="20">
                </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">history:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="history" type="number" required="" name="history" class="form-control" min="0" max="20">
                 </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">biology:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="biology" type="number" required="" name="biology" class="form-control" min="0" max="20">
                 </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">geography:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="" type="number" required="" name="geography" class="form-control" min="0" max="20">
                 </div>
              </div>
              <input type="submit" value="Enviar" class="btn btn-space btn-primary" onclick="submitForms()">
          </div>
     </div>
</form>

如何编写 javascript 代码，以便在提交结果后，笔记的平均值给我一个带有相应笔记的水平进度条？

谁能帮帮我？

提前致谢。

Answer 1

你需要使用 Bootstraps 进度条类来显示这个

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

你可以在这里试试 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar1&stacked=h