我正在努力开发一个分数栏,用户可以看到他的分数,并看到他可以赢得的最高奖项的进展.
问题在于这个酒吧有8个奖项,每个奖项都有不同的奖品.你可以通过只收集200分赢得小奖,或者你可以通过收集50000积分来赢得旅行.
现在的问题是我必须在酒吧上显示所有八个奖项里程碑,每个奖项里程碑之间的差异空间相同
正如你可以看到图片用户赢得7800分他达到7500的里程碑现在主要的问题是我必须得到这些点之间的比例将瓶放在准确的地方,我没有做到:(我努力但是nothig发生了
你可以在这里看到小提琴: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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIARYARgMBIgACEQEDEQH/xAAcAAACAwEBAQEAAAAAAAAAAAAFBgAEBwEDCAL/xABGEAABAwMCAgYGBgYIBwEAAAABAgMRAAQFEiEGMQcTIkFRYRRxgZGhsRUyQsHR8CNSYnKy4SU0U3OCksLxJDNEVGR0gzX/xAAaAQABBQEAAAAAAAAAAAAAAAAEAAECAwUG/8QAKREAAgICAgECBgIDAAAAAAAAAAECAwQREjEhIkEFEzIzUWEU8BUjgf/aAAwDAQACEQMRAD8A3cpuqUhCPxvlci3fJtLF5y3YRpDjiBzUrlv4Uv22QbVKbq/yhc5/85Y8Nz4Df4V3pwvRat2LDC1tvPFS3ShZEpEAA+35Um4C+1z1iiqEwZPOoWW8F1svpo+b76Dl/lHhatP2eQyKNZCEoL6+cHlvvuIoY7xBxJYuPhnJ3ZFuU6iVkjtRHP1javX0pqS2Eo0IV2RpG1Kedvn/AKRUlp5aErKSoJMBRHKfGKopzPnTcOOtF92E6ocuWz6D4CzVxm8Ah69M3TTimXjESR3+6KZKA8EGyc4ZsbqwYbaTcNBxwIEanIhRPnIo9RQCSpUqUhEqVKlIRivTljroZK2yDi0ejLQGmhvMjc7e2krClYBLbanBy7DiRv7a1LppAuG8RazCi44r2QKA8M8O2TZ1KbQVae0SO80Fk5EYNRfZo4dUpR5ewqFu5RrKkPGZ5uI/Gl2+Jcup5etQVPtFahc8PMKKylCIk+I++k/iLh4WTgdaKRIkxyoHCzqp2te4Zl0T+X4Nt6M8fd43hC0ZvCklUuN6TMIVuKa6D8IPpuOFsU4jcG1bHPvAg/KjFbZhslSpUpDEqVKlIRkvSbcek8XW1sCCLdgT5FRn5RVnDphAOqOQM9+3KhWdJveNMo/9YJdCE/4QAKO4pEDlIjfyrnM6zlk6/B0GHHjj7PNfa1pPIyIpb4lZSuxcA3KPrSZgwD8u/wBdMZ3NDcxbl+1WmZhPfy7vz7aycWXG1P8AYbYtwaG3olu/SeDLdBPat1rbPvn76c6zHoTuCmzyliT/AMp1Kx7QR9wrTq7eL2tnK2LUmiVKlSpECVxRABJ7t67VLNPej4i9f/s2Fq+BpCMYs7vr766cUst9a6tRUAJMkn5RTZiEqKVfpJlJ3VHgPCKx4ZN1txSmiQBzEU88L3d+xiFi5Q6lawerhIkzHI+6sWzDfznOTSNuvI3XwS2GjdQpaShBUDBhzaefr76q3d6w3HpQU0VExqSSDGx3Hl40gMXeXsXlOttvtLUqVykkE7D21+rjJ5h1aXHUKUUwQrRO47/n76Ch8M1L6loveV46ZoPRPdNjizJstLBQ81qG0SQf961ysA6Jrp5HHFt1wILwWkk/uk/dW/10dUeMEjCve5tkqVKlWFRKXekF/wBG4NyjgMEs6PeQPvpipK6Xnuq4LfT/AGjqE/GfupDrsxLh9pLt8NadYBkDurTWbXrrFGh5bSkAx1cAlO0gyPVyrNuGv68FEH8/7VqFnpTjxqIJCYBJ5nwisTN+/wD8Ohw/sp/sEvJ2BEiNh5UNukcfbUSd5Ch9zyP4Vk1N7NOxLRS4OUGuOMWrkOvj3g19A1854l3qOKcc4NtN03P+YfjX0ZXVY/20cplrVjJUqVKvBSVnXTe7o4atmp3Xcjb1A/jWi1lXTu+BZ4tid1LWv3RSHXZmvDJHpxHvA76062JFhKZ+rM7fOsw4ZUE3Z1mCdh6601oxYJKphQ2257fAR8axs2L+c3+josLXyUDnfI86HXE6TIAPluKuvqCRK1BOqB3wTQ66UBqjbeSkEQfOsqqD5GjY/AC1aMvbrG2l1Jn219Kp5A+NfMN6sC6C0nkZmvpixdD9nbvDfrG0q94BrqKPoRy2Z9w96lSpVwIQ+VYJ0z5UX3E/orSpRaN9Xt+tuT+fKtn4myzeEwlzfLI1IQQ2PFR5fGvmXIvOXl69cOK1LW4SST3mpRJRW2cxrjiHdSSNvE/yp/t8xNiWpg6ACYUNu6THLekPHNal7D30fab7IKQY8+froHKa2bWLFqIRXeuhKh9TUORVz89/GqFzcLII1EeUV7KYWgkLSpLijOgK9Xd31WW0DI3JGwn8+dBVwgmGzcmgHeqWValBQkT2hFfQPRtl05bhW1MjrbcdS4PCOXwisKu2QR3eo8xTT0WcQ/QuaFo+SLS7IQsq+yv7J+721rVtOPgw8qt72brUqcpuwIxzplzynL1vEsq7DA1OAfrkfcI99ZlbMl50A0V4yul3nEV88sk6n1mT64Hyr8YRjrHQr2bCmtnwhsMxa+c9BDH4sEpJHsIkUZbsylM6SADuYFEMTaJVKVzITsQJ/Jonc2zbaCGzBTG3hI76wrZymuWzoq4wg+OheLPVp2ISCYjyrxdYnUNjJmCN/fRhYG8gEd4ImqrqBqgafV5UNC1hEq0A7m22O0CPCN/GhD7fVOBQ2g91Mtw3M7mY7xQG/SUk+Va2La29GZlVLRuHR9nVZ3h9t14y8weqcV+sQBv7jUpT6FrxRVkbTUdOlDgHnuK5Wic/KOpMzPilopzN0mYUHVavLc0S4aRq0ylMTuSfKh/FR/p28/vl/OrnDx7Q3MbSaqy1uoPwHqzY9Wco3TEwKsXJStotx+jiAnnPrqrZdrSF7g8xH41auUoDZKZnaIjbyrn0nxejoJa5lFxvYnsz5jmK8VoG485ivZwkd0xPuqs6vUSvcE99UpF5XWkAGJVzjegGVACiIA9Rmjb6yo7SQd4HupfyRgHmfdNaOIvUA5T9LHPobteuyWRXrUkIZSISoiZV5HyrlWuhH+tZX9xv5mpW0cxY/UzNuLD/AE9ff36/mascPntjnua8uIbd27zt71OkkXDggqjfUav4DGOs6n71SLa3bErdWoQBUMhcoaQTh2RhPcmOFguCBqAPmJ2oqqyu7ptYYYecjkQg/hypEvukJuySGOF7JtJGyr69RqWT+wnkn1n3UEy2azFzcXjWZ4kvHHGkS0LZ4lpxexAhBCQIJ3is+vBfH1MNt+Krl/riacvB5TZQsH+U/UmKF3dpc2w/T27zQ33W0UwZrNE3ImxJv8k0VEi6cUskJ32KIO+3PzoxjeLeJMYw+9ZZ5x+1YdCAzfL60uAzBCVSYjnB2mk/h0V0yMfjNj7ihheOocwrny2oBkSSomIJ7qP4jibBcSrTbZNhvDZNwwh+3/qzyvBSfsnb+dUc1hL2zeUm4DY0k7hwb/fU6aJVzLZ5tV0N9DZ0IH/isrP9m38zUrz6FXEoymUYnUrqUKkeRI++pWgYs2nIRL5vXxFkEgxN26J8O2aCZ3Km9d9Etzps2TASOS1D7R8fKivET5tbrOPJMLNw6hJ8CpZE0pMgkwAZ8KUmVKIdxnDmZylobuwsVvM6lJCklI1lIkhIJ3gV3hexRkM7bMPICmworWk94SJg+2K1XhC9x2N4cwTCrtlC0IUt1AUCoKUkkyBv9ZVKuLxNzb8cZK9t7C8XjlreUy4i2WQdZB2gctz7qjuKa8i42yT9LDV9YM5B7imzdQClS7bR+yerXBHhvFZbi8deZW6FtYsKef0lRSkgQBzJkgQK15kPoymYfVY3/V3LrCmibN3tBKFBX2dtyKB9Hlp9Bu5p/LMP2i30FtkvMqSCntctvHT7hVlkotryU01XQi9xZnmWxl5i7o2mRYUy6UBWkwQpJEggjmKO4bNOZPHnG3qyu4t06rdxXNSBzST3x3fyoz0uOWt59C3Nm+2+pDS2neqOop2bImOX2udZ5a3CrS9ZuEGC2sE+rvFQ3p+GXJNr1I2ToSBHEGTP/ip/iqV69DgA4kyoHL0YEe1QqVIZeEZxxApVxl8s0sJLLd44VTtJ1kCrvD9gl+5tGUFDLl4pSWSWQvcRuZOwnbYVTyyVqzOdCUkk3atv/qaKYe9trO7xz63Ur+j1KKkJ3KzsoBMbHeR7KHmadKS8JDIGHmcNb5Ju6uFo6h70lkOlPUupQtSN0xsdEfCvLKM3Frc3lr1D92bO2QXXy44oh0gKKj2oCN4iO6aHMZJ9DD7CEuPel45VtcJDcJKyFdpO5+qVDePGrz1/cXabwrx7puL1hDD6us0jsadwCnmQkbE+ND7iHat7YYyeHYN5eW6GvRUi7s2LVbLqlKhxILmsajABmCQPDehjiHnra9csXXrc2uUFoNFw5u2pRQkmVfWlI3ETq8q5d5O+Xc39xZY9TD1+4wpxanQ5oDOnSEjSOekEk+cV4HJOpS8WLO4bFxcKu1lshX6XSrQACPqhSirffYU7lAjBWJbf9/JZvrcNX+bYdurh21srf0phepK+sRCVDZaTMhY38qVeIMK2hbpX1KkpS0uSgoJS4JTtvB35UzLzbBt3FKduba+OKNmV9RoBWFdgpKDI225DlQLNXCL5u/cadSt65RbKUlS+0ViNexPiDU469iuznx9QzdB77i+Isoh6NSLVIO2/1qlc6FFJVxbmi2oKT6KgSO8ggH4zXKJTMuaXIQM6EniTKBaJSL17YmB9c17Y2+tbVMOvMN89ynUfVtX44yt0m4yziAJGQWSe+NZFLtmlHWoDn1Z7XqquVe+y6OSo9I1HF/0oyxcsOXNwhxxaULSpFuAoTq7lHuoUxxHj7nICyTj7lS1OlsKcvlEEjadgPCvPDcSr4UsH8e5aLdUVuPWjg2AKkFHanu1b7feKTrdxy3cbfQSXW1BYM7lQMz76ZU1jPOuezS3nLdj6QK8eUiw0l0i9c31JKtvYDVHBZW1zTjrNnj7tlxlkuwL+OyOcSg8pFeXE2esnbLPehvIWrIuWwbAMnSEHXt3Ry38aWuFsuMDlkXq2lOtlpxpxCTBKVJjafOD7KsnRXvSKqs7IcW2NWXv2MY+hi6u32VuIDgS+0l0RzHaERzPdS/kLi3ul6m1W7qd9mjp99fnP3Ss/e3OZcaWzbBtLNuhX7KUp3I2mTPt8jSw+ysGNJBPIxz9VVKmO/ARHOm46lFGu9BMDiLKBIgehp2/x1KtdDjKGOJcigJAIskgx+8K7VyiDTsUpbFHLMJuc1l7VwwHbh1M+B1mD74pas7aFPWbjYFwhRGmPtDmPz4imTNXFsxn8gp3rd7pwykA/aNWhjbXiYpOFuIyzSRDLo6v0gDwPLWO7x5HblKRXGMhc9PSMcuxuWSp2Iad7ISN07kRMwkJmeXqqy7gr+wKk3VgtAQVJJLqCAQnUrv3ISCfhVZbSZWxcoLFyyYcQ8CFa/wBoHkfzuK/TmTy7Snki5WpBdKnCGkqGteqSdok6iPhG1V8Uhz9LxfW3LLHUOqffR1zaUFBKkaNYOx27O++/wrxdx62GlOpbT1LfVl5S3ESQsakpEHeU77fdXTkstb3SLpS3Gn0ICErLISQkR5cuyB+d/wBt3d9dIWxeP6GtCEqStCUEpA7JGwJ22G/Lxp9COX10cq8lNpbKbZbJKEEonmTzgbCTAPjXMfbDJZJCkpUm0tEhxeocoOw9ZPyq5icVeZ26+j8NbbhJ659ZIQ2nxWruHlzO8CjV+9hMRY/Rdg888UKl55DY/TORzknl4d1OtR8DqMpdIYOiFZVxNklHmq1k/wCcVK50OKacz9+trUB6LHb/AHhUqRDi12JHFojPZAD/ALlz+I1Qx6lIdQpCilaTIUNiD5UQ4w2z+Qn/ALlz+I0Nsz2kwkqkwAmoW/SG4/Y9pyNhnm22eJ7IXLqEwi/ZV1dyhPgT9scudUH+BLZ0L+jOKGurcM9TfsqaJ8JIlKvXFeOPJCokR3wqKIugqakAlZGyvP1+FZ38mcP2aMsCqxb6ZSVwXmFpcRdcQYJDCtnCLkHb1aK41gOHbB3rcnmrrNPJASm2sW1NJMdxcUdx+7FeLmgEbqCjspJ3T5cqruJXI1IIQtM607dqnWVN+xX/AI6tdvZeyfEbj1mMbjrNrFY1PO0thAX++rmo0r3J/PKry1SAncEbgFUfCqNyAZI+dWVybe2KyEYR1E0HoS//AGr/AP8AV/1CpXOhM6c1fTP9V/1CuUejKn2KfGQA4hyIAj/iXP4jQywUUrBEyKs8TuLOZvSqTNw5/Eap2a0BQ1GJ7jVdn0hGP2MmPWnsySB3AGJPu5UQecbKQISCE9xjb2bUNsFJKgAru5j+W9FHVEI09tJIJ0gEkj7qyZI3IPwDnHYKgHFlKolO+341WWsiIE+GmvZfVqCgR3QSOyZ/Pqqs5pUZKlRHKIg+umihpM8HCTuWtp7K/uqhcElfLbxq6tSU93uMVQfcTJAkwYoursCu6NB6FpObvTH/AEp/iTUoT0YXL1tmrhTa0o1Wyhuf2k1KOTMqS8gTi5s2/EGQaUmCLlwR/iNDLYysHQSkHcfzp46Y8G/j+IV3yRNtenWhY7lR2kn5+2s560oVz3qUo7Q9dnF+RnsVKQ4FJGkxtuPxom5fKDfV6yFFB21KI98fCktq7KVTq9hq0q+hGiSRE6Y2J9VDPHYesuP4Ciy0odoFBBnYge8Hu9VfhZZUopMAEbgmSPZ4UvG5cOrTpncjSNxt8q6Lv6oAg9+34VD+KL+Yn7BwlKSdgI2lO9UnFoc7TatSCNqom5c7lGobhx1Q1K3nmABVkKOJVZkpo0jogsU3mauwpGpCLUyI7ypMffUpr6DsK9aYu6y1wCn0wpQzqHNCeZ9pPwqUQBOW2aLksfZ5O0Xa5C2auWF/WbdTIrPMx0M4C8UXMfdXePUT9VJdiofgrf412pSREV7zoOyTRUq2zlq4ju6xhSTy8iaDXPRRxAwTpvcapMEz1jie6eWj112pUtiKg6L+ICZ9JxnP+2c/V1fqVcs+iDPP6dd/jUTG4W4eYn9UVKlIQcsugu5WQb7PtJQRMM2xJ+KvXTdguiLhnFrC7pL+Sc/8pQ0/5UwPfNcqUwh/ZabZaQ0yhKG0CEoSICR4AVypUphH/9k=" 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)
一旦里程碑大于用户的分数,我修改为第二个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; } }