javascript - 尝试使用 % 符号附加输入值

Question

所以我有这个 javascript 代码，它对在 html 端输入的值进行计数，并以圆形图的计数器形式输出......

     /* ---------- 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);

      });

    }

<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>

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

Answer 1

编辑

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

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

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

---

旧

<小时/>尝试:

countSpeed = 2300*percent + "%";

endValue = value*percent + "%";

不完全遵循代码流，但要点是你的 var 最终结束的地方，将其添加到末尾 + "%";

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

> var X = toString(value*percent) + "%";

查看代码片段，它似乎工作正常。什么元素显示结果？

片段

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>