Question

我创建了一个计算进度条。但是我需要在进度条下面的文本框中添加值。当用户单击条时，我需要显示值。特此附上J小提琴示例。

JS代码

<script type="text/javascript">
  window.onload = function() {
    var outside = document.getElementById('outside');
    var inside = document.getElementById('inside');

    outside.addEventListener('click', function(e) {
      inside.style.width = e.offsetX + "px";

      // calculate the %
      var pct = Math.floor((e.offsetX / outside.offsetWidth) * 2000);
      inside.innerHTML = pct + "";
    }, false);
}
</script>

https://jsfiddle.net/Nethmini/5q9tLp3m/20/

Answer 1

您是否要按照以下演示进行操作：

window.onload = function() {
  var outside = document.getElementById('outside');
  var inside = document.getElementById('inside');

  outside.addEventListener('click', function(e) {
    inside.style.width = e.offsetX + "px";

    // calculate the %
    var pct = Math.floor((e.offsetX / outside.offsetWidth) * 2000);
    inside.innerHTML = pct + "";
    pct = (parseInt(pct) / 2000) * 100;
    pct = parseFloat(Math.round(pct * 100) / 100).toFixed(2);
    $('#percent').val(pct + '%');
  }, false);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Rich Media</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    .modal {
      text-align: center;
      padding: 0!important;
    }
    
    .modal:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;
    }
    
    .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    
    #progressBar {
      width: 300px;
      float: left;
      height: 23px;
    }
    
    input {
      width: 100px;
      float: right;
    }
    
    #outside {
      border: 1px solid black;
      height: 20px;
      background-color: silver;
      width: 100%;
      border-radius: 10px;
    }
    
    #inside {
      width: 0px;
      height: 100%;
      background-color: firebrick;
      overflow: visible;
      color: white;
      white-space: nowrap;
    }
  </style>

</head>

<body>

  <div class="container">
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content" style="border-radius: 0px;">
          <div class="modal-body" style="padding-top: 0px; padding-bottom: 0px;">
            <div class="row">

              <div class="col-md-9">
                <div class="row" style="background-color: #f00; color: #fff;">
                  <div class="col-md-12" style="padding: 10px;">
                    <p>What is Lorem Ipsum?</p>
                    <h4 style="letter-spacing: 3px;"><b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </b></h4>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4"></div>
                  <div class="col-md-8" style="background-color: #000; color: #fff;">
                    <p><b>Lorem Ipsum is simply</b></p>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12"><br>
                    <div id="outside">
                      <div id="inside"></div>
                    </div>
                  </div><br><br><br><br>
                </div>
                <input type="text" id="percent" value="" />
                <div>
                  <div class="row">
                    <div class="col-md-12">

                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

如何在文本框中添加计算进度条？

1 个答案: