H5 to achieve mobile-level progress bar

H5 implementation Level progress bar

requirements are as follows: Implement an animation progress bar, page one to implement a progress bar animation, because the app this page will often change, so did not use the trial Android or iOS to achieve, hope through H5 to do;

The server side returns the following data:

varConfig = {    //rank large picture URL addressCourierrankbigurl: ' Images/grade2-icon.png ',    //Distribution officer Rank nameCourierrankname: ' 3 level fresh front officer ',    //simultaneous access to the singularCouriercanpackgecountdoing: ' 10 ',    //Integral array 1,2,3,4,5;50,100,150,200,250Integrationrankstring: ' 1,2,3,4,5;0,100,150,200,250 ',    //Experience Bean Array 1,2,3,4,5;50,100,150,200,250Experiencebeanrankstring: ",    //points accumulated this monthMonthcompletedwaybills: ' 150 '};

Need our front-end to render each data and achieve progress bar effect;

The basic principle of implementing the progress bar is as follows:

Because the page is divided into 5 levels, so in order to compatible with each mobile browser, so the total width of the progress bar is set to 100%, then each paragraph is 20% width.

If the first paragraph 50 points the second paragraph 100 minutes the third paragraph 300 points the fourth paragraph 500 points, the fifth paragraph integral is twice times the fourth paragraph, then if the server returns 375 points, then the browser occupies the following
Since the page is divided into 5 paragraphs, each segment shows a width of 20%; Iterates over an array [50,100,300,500], defining a traversal of Count = 0;
If any of the array is smaller than the server returns 375, then count is added 1, so count=3
So the algorithm scale is as follows: (375-300)/(500-300) + 3 = 3/8 + 3 = 3.375; Last 3.375/5 * 100%= 67.5%;
Remember that because the array arrs removed the first item, Curnum to subtract 1: curNum-1;

JS implementation code is as follows

/** @todo Calculate the percentage of the progress bar * @param {SCORE,ARRS} The server returns an array of total points returned by the server*/ varCount = 0; functionpercent (Score,arrs) {varTempcount = 0; varpercent; //if the integral is greater than the last total integral of the array, then the progress bar is the largest     if(Score*1 > Arrs[arrs.length-1] * 1) {score= Arrs[arrs.length-1]; }      for(vari = 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; }                  returnPercent + "%";}

achieve animation or use CSS3 Oh!

JS Implementation progress bar code is as follows:

<script>
/* The data returned by the server is as follows */varConfig = {        //rank large picture URL addressCourierrankbigurl: ' Images/grade2-icon.png ',        //Distribution officer Rank nameCourierrankname: ' 3 level fresh front officer ',        //simultaneous access to the singularCouriercanpackgecountdoing: ' 10 ',        //Integral array 1,2,3,4,5;50,100,150,200,250Integrationrankstring: ' 1,2,3,4,5;0,100,150,200,250 ',        //Experience Bean Array 1,2,3,4,5;50,100,150,200,250Experiencebeanrankstring: ",        //points accumulated this monthMonthcompletedwaybills: ' 150 '     }; </script>
*/* Remember: the implementation of the progress bar JS code must be placed in the head, if placed in the tail, in the mobile browser is no progress bar animation effect, because the page is loaded, it has been set width */<script>functionSetStyle (obj,css) { for(varIinchCSS) {Obj.style[i]=Css[i]; }     }      varScores = Config.integrationRankString.split (";") [1].split (', '); //points returned in the background      varScore =Config.monthcompletedwaybills; /** The width percentage of the progress bar is calculated as follows: * If the first paragraph 50 points the second paragraph 100 minutes the third paragraph 300 points the fourth paragraph 500 points then if the server returns 375 points, then under the browser for example under * due to the page Divided by 5 paragraphs, each segment shows a width of 20%;         Iterates over an array [50,100,300,500], defining a traversal of Count = 0; * If any part of the array is smaller than the server returns 375, then count is added 1, so the count=3 * scale is as follows: (375-300)/(500-300) + 3 = 3/8 + 3 = 3.375;          Last 3.375/5 * 100%= 67.5%; * Remember that because the array arrs removed the first item, Curnum to subtract 1: curNum-1*/         /** @todo Calculate the percentage of the progress bar * @param {SCORE,ARRS} The server returns an array of total points returned by the server*/         varCount = 0; functionpercent (Score,arrs) {varTempcount = 0; varpercent; //if the integral is greater than the last total integral of the array, then the progress bar is the largest            if(Score*1 > Arrs[arrs.length-1] * 1) {score= Arrs[arrs.length-1]; }             for(vari = 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; }                         returnPercent + "%"; }         if(Scores[0] = = 0) {scores.shift (); }         //returns the value of the fifth paragraph calculation method val Fiveval = arrs[arrs.length-1] * 2         varFiveval = scores[scores.length-1] * 2 + "";         Scores.push (Fiveval); varwidth =percent (Score,scores); varDynamic = document.getElementById ("dynamic"); Dynamic.innerhtml= ' @-webkit-keyframes load {0% {width:0%;} 100% {width: ' +width+ ';}} '; Window.onload=function(){            varBar = document.getElementById ("Progress-bar");         SetStyle (Bar,{width:width}); }  </script>

Other implementations of the page JS as follows:

<script>function$Id (Id) {returndocument.getElementById (ID);        }; functionhasclass (obj, cls) {returnObj.className.match (NewRegExp (' (\\s|^) ' + CLS + ' (\\s|$) ')); }            functionaddclass (obj, cls) {if(!hasclass (obj, CLS)) Obj.classname + = "" +CLS; }          varBar = $Id ("Progress-bar"),//progress bar IDgradeimg = $Id ("grade-img"),//level picture iconCourierrankname = $Id ("Courierrankname"),//Distribution officer Rank nameGradeamount = $Id ("Grade-amount"),//simultaneous access to the singularMonthscore = $Id ("Monthscore"),//points accumulated this monthScoregrade = $Id ("Progree-nums"),//level IDProgressscore = $Id ("Progress-score"),//Integral IDDivisionbar = $Id ("Division-bar");//progress bar Separator Bar        //the level picture returned by the servergradeimg.style.backgroundimage= "url (" +config.courierrankbigurl+ ")"; //the rank name returned by the servercourierrankname.innerhtml =Config.courierrankname; //simultaneous access to the singulargradeamount.innerhtml =config.couriercanpackgecountdoing; //points accumulated this monthmonthscore.innerhtml = "(" + config.monthcompletedwaybills + "min" + ")"; if(Config.monthcompletedwaybills * < 0) {            varMinmonthscore = $Id ("Minmonthscore"); if(!hasclass (Minmonthscore, ' current ') {addclass (Minmonthscore,' Current '); }        }        //array of levels and integrals returned by the server        varGrades = Config.integrationRankString.split (";") [0].split (', '), scores= Config.integrationRankString.split (";") [1].split (', '), gradeshtml= ' '; Scoreshtml= ' ';  for(vari = 0; i < grades.length; i++) {gradeshtml+ = ' <span> ' +grades[i]+ ' level </span> '; } scoregrade.innerhtml=gradeshtml;  for(varj = 0; J < Scores.length; J + +) {            if(j = = 0) {scoreshtml+ = ' <i> ' +scores[j]+ ' </i> '; }Else{scoreshtml+ = ' <span> ' +scores[j]+ ' </span> '; }} progressscore.innerhtml=scoreshtml; varDivisionbarspans = Divisionbar.getelementsbytagname ("span"); //points returned in the background        varScore2 =Config.monthcompletedwaybills; varCurindex =Scores.indexof (Score2); if(Count*1 > 0) {              for(vari = 0; I < count; i++) {                if(!hasclass (Divisionbarspans[i], ' current ')) {                    //For example, if the return integral is 200 and the array has 200, the integral is exactly equal, then the current class name is not added.                    if(I!==Curindex) {                        (function(i) {setTimeout (function() {addclass (divisionbarspans[i],' Current '); },2500); }) (i)} }}</script>

The demo can be downloaded as follows

H5 to achieve mobile-level progress bar