尝试使用％符号附加输入值

Question

所以我有这个javascript代码，它计算在html端输入的值，并以计数器形式输出它，用于循环图....

＆＃13;

＆＃13;

     /* ---------- Circle Progess Bars ---------- */

    function circle_progess() {

      var divElement = $('div'); //log all div elements

      if (retina()) {

        $(".whiteCircle").knob({
          'min': 0,
          'max': 100,
          'readOnly': true,
          'width': 240,
          'height': 240,
          'bgColor': 'rgba(255,255,255,0.5)',
          'fgColor': 'rgba(255,255,255,0.9)',
          'dynamicDraw': true,
          'thickness': 0.2,
          'tickColorizeValues': true
        });

        $(".circleStat").css('zoom', 0.5);
        $(".whiteCircle").css('zoom', 0.999);


      } else {

        $(".whiteCircle").knob({
          'min': 0,
          'max': 100,
          'readOnly': true,
          'width': 120,
          'height': 120,
          'bgColor': 'rgba(255,255,255,0.5)',
          'fgColor': 'rgba(255,255,255,0.9)',
          'dynamicDraw': true,
          'thickness': 0.2,
          'tickColorizeValues': true
        });

      }



      $(".circleStatsItemBox").each(function() {

        var value = $(this).find(".value > .number").html();
        var unit = $(this).find(".value > .unit").html();
        var percent = $(this).find("input").val() / 100;

        countSpeed = 2300 * percent;

        endValue = value * percent;

        $(this).find(".count > .unit").html(unit);
        $(this).find(".count > .number").countTo({

          from: 0,
          to: endValue,

          speed: countSpeed,
          refreshInterval: 50

        });

        //$(this).find(".count").html(value*percent + unit);

      });

    }

＆＃13;

<div class="row-fluid hideInIE8 circleStats">

  <div class="span3" ontablet="span4" ondesktop="span3">
    <div class="circleStatsItemBox yellow">
      <div class="header">Disk Space Usage</div>
      <span class="percent">percent</span>
      <div class="circleStat">
        <input value="" class="whiteCircle" type="text">
      </div>
      <div class="footer">
        <span class="count">
								<span class="number">20000</span>
        <span class="unit">MB</span>
        </span>
        <span class="sep"> / </span>
        <span class="value">
								<span class="number">50000</span>
        <span class="unit">MB</span>
        </span>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

我基本上试图达到一个点，其中显示的值后面有％。如果这没有意义，请道歉。 html就在这里......

Answer 1

修改

彻底浏览完源代码后，我注意到使用了jQuery Knob插件。大多数源代码都与插件有关，因此对此源代码的任何修复都不会产生一个有效的示例。所以OP必须转到原始的完整源并添加以下内容：

  

var endValue = (value * percent) + "%";

     

$('.whiteCircle').val(endValue);

<小时/>

OLD

<小时/> 尝试：

  

countSpeed = 2300*percent + "%";

     

endValue = value*percent + "%";

并不完全遵循代码流程，但它的要点是你的var最终到达的地方，将其添加到最后+ "%";

也许你的显示字符串？如果是这样，请尝试：

<德尔>＆GT; var X = toString(value*percent) + "%";

看看Snippet它似乎工作正常。显示结果的元素是什么？

段

var value = .30;
var percent = 100;
var X = value * percent + "%";

document.getElementById('out1').value = X;

//or with jQuery

$('#out2').val(X);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output id='out1'></output><br/>
<output id='out2'></output>

段

/* ---------- Circle Progess Bars ---------- */

function circle_progess() {

  var divElement = $('div'); //log all div elements

  if (retina()) {

    /*$(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 240,
      'height': 240,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.2,
      'tickColorizeValues': true
    });*/
    $(".circleStat").css('zoom', 0.5);
    $(".whiteCircle").css('zoom', 0.999);


  } else {

    /*$(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 120,
      'height': 120,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.2,
      'tickColorizeValues': true
    });*/

  }



  $(".circleStatsItemBox").each(function() {

    var value = $(this).find(".value > .number").html();
    var unit = $(this).find(".value > .unit").html();
    var percent = $(this).find("input").val() / 100;

    countSpeed = 2300 * percent;

    endValue = value * percent + "%";

    $(this).find(".count > .unit").html(unit);

    var value = .50;
    var percent = 100;

    $('.whiteCircle').val(endValue);

    /* $(this).find(".count > .number").countTo({

       from: 0,
       
       to: endValue,
       speed: countSpeed,
       refreshInterval: 50

     });*/

    //$(this).find(".count").html(value*percent + unit);

  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid hideInIE8 circleStats">

  <div class="span3">
    <div class="circleStatsItemBox yellow">
      <div class="header">Disk Space Usage</div>
      <span class="percent">percent</span>
      <div class="circleStat">
        <input value="0" class="whiteCircle" type="text">
      </div>

      <div class="footer">
        <span class="count">
								<span class="number">20000</span>
        <span class="unit">MB</span>
        </span>
        <span class="sep"> / </span>
        <span class="value">
								<span class="number">50000</span>
        <span class="unit">MB</span>
        </span>
      </div>
    </div>
  </div>