代码改变世界

h5实现手机端等级进度条

2015-04-16 22:25  龙恩0707  阅读(5482)  评论(0编辑  收藏

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>

demo如下可以下载