所以我有这个 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 在这里...
最佳答案
编辑
彻底浏览源代码后,我注意到使用了 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>
关于javascript - 尝试使用 % 符号附加输入值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40592253/