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

Question

I created a calculation progress bar. 我创建了一个计算进度条。 But I need to add values into a text box below the progress bar. 但是我需要在进度条下面的文本框中添加值。 And I need to shows the values when the user clicks the bar. 当用户单击条时，我需要显示值。 Herewith attached the J fiddle example. 特此附上J小提琴示例。

JS code 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/ https://jsfiddle.net/Nethmini/5q9tLp3m/20/

Answer 1

Are you trying to do as below demo: 您是否正在尝试执行以下演示：

 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 个解决方案

解决方案1
0 已采纳 2018-08-29 09:25:32

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-29 09:25:32

解决方案1
0 已采纳 2018-08-29 09:25:32