Question

我正在努力开发一个分数栏，用户可以看到他的分数，并看到他可以获得的最高奖项的进展。

问题在于这个酒吧有8个奖项，每个奖项都有不同的奖品。你可以通过只收集200分赢得小奖，或者你可以通过收集50000分赢得旅行。

现在的问题是我必须在酒吧上显示所有八个奖项里程碑，每个奖励里程碑之间的差异空间相同

enter image description here

正如你可以看到用户赢得7800分的图片他达到7500的里程碑现在主要的问题是我必须得到这些点之间的比例将瓶子放在准确的位置上我没有做到:(我试过了这么辛苦但没有发生

你可以在这里看到小提琴：http://jsfiddle.net/Udwq9/2/

HTML

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</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>

SCRIPT

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

Answer 1

这似乎并不太难，但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;
    }
}

Answer 2

使用以下循环计算所需的偏移量（从数组末尾开始循环）：

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

这是 Demo

Answer 3

只需将margin-left: -8px;更改为margin-left: 8px;即可.barCont .seek 这是：http://jsfiddle.net/Udwq9/3/

使用jquery获取两个数组的比率

3 个答案: