使用jQuery获取两个数组的比例
我正在努力开发一个评分栏，用户可以看到他的分数，并看到他可以赢得的最高奖金的进展。
问题是在这个酒吧有8个奖项，每个奖项都有不同的奖励点。 您可以通过只收集200点赢得小奖，或者您可以通过收集50000点赢得旅行。
现在问题是我必须在栏上显示所有8个奖项的里程碑，并且每个奖项里程碑之间的差异空间都是相同的
正如你可以看到图片用户赢得7800分，他实现了7500的里程碑，现在的主要问题是我必须得到这些点之间的比例，把瓶子放在准确的地方，我没有做到:(我努力尝试，但是nothig happend
你可以在这里看到小提琴：http://jsfiddle.net/Udwq9/2/
HTML
<p> </p><p> </p><p> </p><p> </p>
<div class="barCont">
<div class="innerLight"></div>
<div class="innerDark"> </div>
<div class="seek">
<div class="youRhere">
<p>You are here:<br />
<span id="Points">7800 Points</span></p>
<br />
</div>
<img src="data:image/jpeg;base64,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" width="17" height="74" alt=" " /> </div>
<div class="mileStone" style="">200
</div>
<div class="mileStone" style="">300
</div>
<div class="mileStone" style="">450
</div><div class="mileStone" style="">750
</div>
<div class="mileStone" style="">7500
</div>
<div class="mileStone" style="">15000
</div>
<div class="mileStone" style="">20000
</div><div class="mileStone" style="">50000
</div>
</div>
脚本
var TopScore = 50000;
var MileStone = new Array("200", "300", "450", "750", "7500", "15000", "20000", "50000");
var barWidth = $('.innerLight').width();
var ArrayLength = MileStone.length;
var milestonepos = barWidth/ArrayLength;
var milestoneposMain = milestonepos/ArrayLength;
var Points = $('#Points').text();
var yourPoints = parseInt(Points);
var pos = 0;
var bottlePos = 0;
var posTwo = 0;
var posTwoMain = 0;
for(var i=0; i <= ArrayLength; i++){
var pos = pos + milestonepos;
$('.mileStone').eq(i).animate({ left: '' + pos + 'px' });
//alert(pos)
}
var pos = 0;
for(var j=0; j<= ArrayLength; j++){
if(yourPoints >= MileStone[j])
{
var pos = pos + milestonepos;
/*var step1 = yourPoints - MileStone[j];
var step2 = MileStone[j+1] - yourPoints;
var step3 = step2/step1;
var step4 = step3*100;*/
// var pointsRatio = yourPoints - posRatio;
//var posTwoMain = parseFloat(posTwo.style.width)
//alert(parseInt(posRatio));
//alert(parseInt(pointsRatio));
// var pos = pos + pointsRatio;
}
}
$('.seek').animate({ left: '' + parseInt(pos) + 'px' }, 1000);
这似乎并不困难，但7800是一个不好的测试值，因为它在7500到15000的范围内几乎没有7500.（所以在JSfiddle中，我将它改为12700）
http://jsfiddle.net/Udwq9/9/
一旦里程碑大于用户的分数，我将其修改为第二个for-loop打破。
for(var j=0; j < ArrayLength; j++)
{
if(yourPoints >= MileStone[j])
{
pos = pos + milestonepos;
}
else
{
prevMilestone = j ? MileStone[j-1] : 0;
pos += parseInt( (yourPoints-prevMilestone)/(MileStone[j]-prevMilestone) * milestonepos);
break;
}
}
使用以下循环来计算所需的偏移量（从数组末尾循环）：
var pos2 = 0;
for(var j=ArrayLength-1; j >= 0; j--){
var currentMilestone = parseInt( MileStone[j]);
//reaching "full" milestone
if(yourPoints >= currentMilestone)
{
pos2 = milestonepos * (j+1);
var diff = yourPoints - currentMilestone;
console.log("diff: " + diff);
//counting offset to move forward from "full" milestone
if(j < ArrayLength - 1) {
var nextMilestone = MileStone[j+1];
var diffInPoints = nextMilestone - currentMilestone;
var subDiff = (milestonepos * diff) / diffInPoints;
pos2 += subDiff;
}
break;
}
}
console.log("pos2: " + pos2);
$('.seek').animate({ left: '' + parseInt(pos2) + 'px' }, 1000);
这是演示
只需更改margin-left: -8px; 到margin-left: 8px; .barCont .seek这里是：http://jsfiddle.net/Udwq9/3/