h5实现等级进度条
需求如下： 实现一个动画进度条，页面一打开实现一个进度条动画，因为App这个页面会经常改，所以没有使用原审Android或者IOS来实现，希望通过H5来做；
服务器端返回如下数据：
var Config = {
// 等级大图片url地址
courierRankBigUrl: 'images/grade2-icon.png',
// 配送员等级名称
courierRankName: '3级鲜锋官',
// 同时可接单数
courierCanPackgeCountDoing: '10',
// 积分数组1,2,3,4,5;50,100,150,200,250
integrationRankString: '1,2,3,4,5;0,100,150,200,250',
// 经验豆数组1,2,3,4,5;50,100,150,200,250
experienceBeanRankString: '',
// 本月累计积分
monthCompletedWaybills: '150'
};
需要我们前端把各个数据渲染出来及 实现进度条效果；
实现进度条基本原理如下：
因为页面分了5个等级，所以为了兼容各个手机端浏览器，因此把进度条总宽度设置为100%；那么每段就是20%的宽度了。
假如第一段50分 第二段100分 第三段300分 第四段500分，第五段积分就是第四段的2倍；那么假如服务器返回的是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；
JS实现代码如下
/*
* @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 + "%";
}
实现动画效果还是使用CSS3哦！
JS实现进度条代码如下：
<script>
/* 服务器返回的数据如下 */
var Config = {
// 等级大图片url地址
courierRankBigUrl: 'images/grade2-icon.png', // 配送员等级名称
courierRankName: '3级鲜锋官', // 同时可接单数
courierCanPackgeCountDoing: '10', // 积分数组1,2,3,4,5;50,100,150,200,250
integrationRankString: '1,2,3,4,5;0,100,150,200,250', // 经验豆数组1,2,3,4,5;50,100,150,200,250
experienceBeanRankString: '', // 本月累计积分
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] * 2
var 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>
其他实现页面的JS如下：
<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"), // 等级图片icon
courierRankName = $Id("courierRankName"), // 配送员等级名称
gradeAmount = $Id("grade-amount"), // 可同时接单数
monthScore = $Id("monthScore"), // 本月累计积分
scoreGrade = $Id("progree-nums"), // 等级id
progressScore = $Id("progress-score"), // 积分id
divisionBar = $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>