javascript - 如何创建范围从 1(=负)到 10(=正)的假 "YouTube-Bar"

Question

我想做的事情:

我想创建一个假的“YouTube 栏”，我的访问者可以在其中看到他们的群组(据称)如何评价某些内容。此“YouTube 栏”的范围应介于 1 = 非常负面到 10 = 非常正面之间。

到目前为止我所得到的:

创建一个范围介于 0 = 非常负面和 10 = 非常正面(而 5 = 中性/中间点)之间的“YouTube 栏”是没有问题的。在本例中，我有十一个数字(从 0 到 10)。但我很难将范围转换为 1-10(而 5.5 应该是中间点，而我只得到 10 个数字)。

我知道它应该适用于基础数学(也许将随机数除以 100/11 并乘以 100/10？)，但我觉得自己有点愚蠢，因为没有弄清楚。这是我到目前为止的代码( http://jsfiddle.net/AauvC/ ):

HTML

<div id="youtubeFake">
<table>
    <tr>
        <td> My Group Rating:</td>
        <td id="ownNumber"></td>
    </tr>
    <tr>
        <td colspan="2" class="youtubeBar"> 
            <div id="ownLeft"></div>
            <div id="ownRight"></div>
        </td>
    </tr>
</table>
</div>

CSS

#youtubeFake{
    width: 60%;
}

.youtubeBar {
    width: 60%;
    padding-bottom: 10px;
}

#ownLeft{
    background-color: green;
    height: 4px;
    float: left;
}

#ownRight{
    background-color: red;
    height: 4px;
    float: right;
}

#ownNumber,{
    text-align: right;
}

JQuery/Javascript

$(document).ready(function(){
    var ownPercentage = (Math.random()*90)+10;       //create random number between 10 - 100
    $('#ownLeft').width(ownPercentage + '%');        //left part of the bar (the green part)
    $('#ownRight').width(100-ownPercentage + '%');   //right part of the bar (the red part)
    document.getElementById('ownNumber').innerHTML = (ownPercentage/10).toFixed(1);   //write random number into the HTML document and divide it by 10 (so I have a number between 1-10 instead of 10-100)
});

如果你们能给我提示，我会很高兴!

非常感谢!

Answer 1

您可以通过获取 ownPercentage 在 90 中的百分比(您的总数 (100) 减去您的起始数字 ( 10))，然后乘以您的总数 (100):

var ownPercentage = (Math.random()*90)+10;
var ownPercentageWidth = ((ownPercentage - 10) / 90) * 100;
$('#ownLeft').width(ownPercentageWidth + '%');
$('#ownRight').width(100-ownPercentageWidth + '%');

10 将给出 0% 宽度，55 将给出 50% 宽度和 100 将给出 100% 宽度。

JSFiddle .

如果ownPercentage是10，这将给出:

> ((10 - 10) / 90) * 100
> (0 / 90) * 100
> 0 * 100
> 0

..如果是55:

> ((55 - 10) / 90) * 100
> (45 / 90) * 100
> 0.5 * 100
> 50

..如果是100:

> ((100 - 10) / 90) * 100
> (90 / 90) * 100
> 1 * 100
> 100