var Config = {// 等级大图片url地址courierRankBigUrl:  'images/grade2-icon.png',// 配送员等级名称courierRankName: '3级鲜锋官',// 同时可接单数courierCanPackgeCountDoing:  '10',// 积分数组1,2,3,4,5;50,100,150,200,250integrationRankString:  '1,2,3,4,5;0,100,150,200,250',// 经验豆数组1,2,3,4,5;50,100,150,200,250experienceBeanRankString: '',// 本月累计积分monthCompletedWaybills:  '150'
};

/** @todo 计算进度条的百分比* @param {score,arrs} 服务器返回的总分 服务器返回的数组*/var count = 0;function percent(score,arrs) {var tempCount = 0;var percent;//  如果积分大于数组最后一个总积分的话， 那么进度条就是最大的if(score*1 > arrs[arrs.length -1] * 1) {score = arrs[arrs.length -1];}for(var i = 0; i < arrs.length; i+=1) {if(score*1 > arrs[i]*1) {tempCount++;}}count = tempCount;if(tempCount*1 < 1) {percent = (score / arrs[0]) / 5 * 100;}else {percent = ((score - arrs[tempCount - 1]) / (arrs[tempCount] - arrs[tempCount - 1]) + tempCount) / 5 * 100;}return percent + "%";
}

<script>     /* 服务器返回的数据如下 */var Config = {// 等级大图片url地址courierRankBigUrl:  'images/grade2-icon.png',// 配送员等级名称courierRankName: '3级鲜锋官',// 同时可接单数courierCanPackgeCountDoing:  '10',// 积分数组1,2,3,4,5;50,100,150,200,250integrationRankString:  '1,2,3,4,5;0,100,150,200,250',// 经验豆数组1,2,3,4,5;50,100,150,200,250experienceBeanRankString: '',// 本月累计积分monthCompletedWaybills:  '150'};</script>  /* 切记：实现进度条的JS代码一定要放在头部，如果放在尾部的话，在手机端浏览器下是没有进度条的动画效果的，因为页面先加载完后，就已经设置了宽度 */<script>function setStyle(obj,css){for(var i in css){obj.style[i] = css[i];}}var scores = Config.integrationRankString.split(";")[1].split(',');// 后台返回的积分var score = Config.monthCompletedWaybills;/* * 进度条的宽度百分比的计算方式设计如下：* 假如第一段50分 第二段100分 第三段300分  第四段500分 那么假如服务器返回的是375分，那么在浏览器下占比如下* 由于页面分了5段，每段显示20%的宽度; 遍历数组[50,100,300,500]，定义一个遍历count = 0;* 如果数组任何一段小于服务器返回375的话，那么count自加1，因此count=3* 比例如下：(375 - 300) / (500 - 300) + 3 = 3/8 + 3 = 3.375; 最后 3.375 / 5 * 100%= 67.5%; * 记住 因为数组arrs去掉了第一项了 所以curNum要减去1 即：curNum - 1 *//** @todo 计算进度条的百分比* @param {score,arrs} 服务器返回的总分 服务器返回的数组*/var count = 0;function percent(score,arrs) {var tempCount = 0;var percent;//  如果积分大于数组最后一个总积分的话， 那么进度条就是最大的if(score*1 > arrs[arrs.length -1] * 1) {score = arrs[arrs.length -1];}for(var i = 0; i < arrs.length; i+=1) {if(score*1 > arrs[i]*1) {tempCount++;}}count = tempCount;if(tempCount*1 < 1) {percent = (score / arrs[0]) / 5 * 100;}else {percent = ((score - arrs[tempCount - 1]) / (arrs[tempCount] - arrs[tempCount - 1]) + tempCount) / 5 * 100;}return percent + "%";}if(scores[0] == 0) {scores.shift();}// 返回第五段的值 计算方法 val fiveVal = arrs[arrs.length - 1] * 2var fiveVal = scores[scores.length - 1] * 2 + "";scores.push(fiveVal);var width = percent(score,scores);var dynamic = document.getElementById("dynamic");dynamic.innerHTML = '@-webkit-keyframes load {0% {width: 0%;}100% {width: '+width+';}}';window.onload = function(){var bar = document.getElementById("progress-bar");setStyle(bar,{width:width});}</script>

<script>function $Id(id){return document.getElementById(id);};function hasClass(obj, cls) {  return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  }  function addClass(obj, cls) {  if (!hasClass(obj, cls)) obj.className += " " + cls;  }  var bar = $Id("progress-bar"),                 // 进度条id gradeImg = $Id("grade-img"),               // 等级图片iconcourierRankName = $Id("courierRankName"),  // 配送员等级名称gradeAmount = $Id("grade-amount"),         // 可同时接单数monthScore = $Id("monthScore"),            // 本月累计积分scoreGrade = $Id("progree-nums"),          // 等级idprogressScore = $Id("progress-score"),     // 积分iddivisionBar = $Id("division-bar");         // 进度条分隔条// 服务器返回的等级图片gradeImg.style.backgroundImage="url("+Config.courierRankBigUrl+")";// 服务器返回的等级名称courierRankName.innerHTML = Config.courierRankName;// 可同时接单数gradeAmount.innerHTML = Config.courierCanPackgeCountDoing;// 本月累计积分monthScore.innerHTML = "(" + Config.monthCompletedWaybills + "分" + ")";if(Config.monthCompletedWaybills *1 < 0) {var minMonthScore = $Id("minMonthScore");if(!hasClass(minMonthScore,'current')) {addClass(minMonthScore,'current');}}// 服务器返回的等级和积分数组var grades = Config.integrationRankString.split(";")[0].split(','),scores = Config.integrationRankString.split(";")[1].split(','),gradesHTML = '';scoresHTML = '';for(var i = 0; i < grades.length; i++) {gradesHTML += '<span>'+grades[i]+'级</span>';}scoreGrade.innerHTML = gradesHTML;for(var j = 0; j < scores.length; j++) {if(j == 0) {scoresHTML += '<i>'+scores[j]+'</i>';}else {scoresHTML += '<span>'+scores[j]+'分</span>';}}progressScore.innerHTML = scoresHTML;var divisionBarSpans = divisionBar.getElementsByTagName("span");// 后台返回的积分var score2 = Config.monthCompletedWaybills;var curIndex = scores.indexOf(score2);if(count*1 > 0) {for(var i = 0; i < count; i++) {if(!hasClass(divisionBarSpans[i],'current')) {// 比如返回积分是200 正好数组也有200这个积分 正好相等的话 ，那么就不添加current类名if(i !== curIndex) {(function(i){setTimeout(function(){addClass(divisionBarSpans[i],'current');},2500);})(i)}}} }</script>