单击按钮时从输入框中绘制百分比条

Drawing a percentage bar from input boxes on buttonclick

本文关键字：绘制 百分比 输入 按钮 单击      更新时间：2023-09-26

我有两个输入框，我想要的是单击一个按钮以显示第一个数字表示的整体百分比。 我找到了一个用于绘制我喜欢的进度条的 JavaScript 代码，当我"硬编码"一个数字以表示它时，下面的代码有效。 如果有人可以帮助我处理变量，我将不胜感激。

<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="Input" VALUE="">
<INPUT TYPE="text" NAME="Input2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="drawPercentBar(800, Number(Input/Input2*100), 'blue', 'red')">
</FORM>

这将绘制带有 NaN% 误差的百分比条。

你应该使用下面的数字代替数字（输入/输入2*100）

Number(document.getElementsByName('Input')[0].value/document.getElementsByName('Input2')[0].value*100)

但请确保输入的值不是 0。

这就是

我的做法 http://jsfiddle.net/dangoodspeed/JbEdZ/1/

$(function() {
    $(".percent").click(function() {
        var percent=parseInt($(".input1").val())/parseInt($(".input2").val());
        $("#percentage").css("width",parseInt(percent*parseInt($("#percentageBar").css("width"))));
    });
})

NaN代表不是数字。

所以你试着把它们不是数字Input/Input2除法。它们是文本框的名称。

你能试试吗 

... onclick="drawPercentBar(800, 
                            Number(
                                  document.getElementsByName('Input')[0]/
                                  document.getElementsByName('Input2')[0]*
                                  100
                                  ), 
                            'blue', 
                            'red')" ...
相关文章：