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

如何显示进度条以指示平均值

1 个答案: