h5實(shí)現(xiàn)等級(jí)進(jìn)度條

?需求如下： 實(shí)現(xiàn)一個(gè)動(dòng)畫進(jìn)度條，頁(yè)面一打開實(shí)現(xiàn)一個(gè)進(jìn)度條動(dòng)畫，因?yàn)锳pp這個(gè)頁(yè)面會(huì)經(jīng)常改，所以沒(méi)有使用原審Android或者IOS來(lái)實(shí)現(xiàn)，希望通過(guò)H5來(lái)做；

?服務(wù)器端返回如下數(shù)據(jù)：

var Config = {// 等級(jí)大圖片url地址courierRankBigUrl: 'images/grade2-icon.png',// 配送員等級(jí)名稱courierRankName: '3級(jí)鮮鋒官',// 同時(shí)可接單數(shù)courierCanPackgeCountDoing: '10',// 積分?jǐn)?shù)組1,2,3,4,5;50,100,150,200,250integrationRankString: '1,2,3,4,5;0,100,150,200,250',// 經(jīng)驗(yàn)豆數(shù)組1,2,3,4,5;50,100,150,200,250experienceBeanRankString: '',// 本月累計(jì)積分monthCompletedWaybills: '150' };

需要我們前端把各個(gè)數(shù)據(jù)渲染出來(lái)及 實(shí)現(xiàn)進(jìn)度條效果；

實(shí)現(xiàn)進(jìn)度條基本原理如下：

?因?yàn)轫?yè)面分了5個(gè)等級(jí)，所以為了兼容各個(gè)手機(jī)端瀏覽器，因此把進(jìn)度條總寬度設(shè)置為100%；那么每段就是20%的寬度了。

假如第一段50分 第二段100分 第三段300分 第四段500分，第五段積分就是第四段的2倍；那么假如服務(wù)器返回的是375分，那么在瀏覽器下占比如下
由于頁(yè)面分了5段，每段顯示20%的寬度; 遍歷數(shù)組[50,100,300,500]，定義一個(gè)遍歷count = 0;
如果數(shù)組任何一段小于服務(wù)器返回375的話，那么count自加1，因此count=3
因此算法比例如下：(375 - 300) / (500 - 300) + 3 = 3/8 + 3 = 3.375; 最后 3.375 / 5 * 100%= 67.5%;
?記住 因?yàn)閿?shù)組arrs去掉了第一項(xiàng)了 所以curNum要減去1 即：curNum - 1；

JS實(shí)現(xiàn)代碼如下

/** @todo 計(jì)算進(jìn)度條的百分比* @param {score,arrs} 服務(wù)器返回的總分 服務(wù)器返回的數(shù)組*/var count = 0;function percent(score,arrs) {var tempCount = 0;var percent;// 如果積分大于數(shù)組最后一個(gè)總積分的話， 那么進(jìn)度條就是最大的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 + "%"; }

實(shí)現(xiàn)動(dòng)畫效果還是使用CSS3哦！

JS實(shí)現(xiàn)進(jìn)度條代碼如下：

<script>
/* 服務(wù)器返回的數(shù)據(jù)如下 */var Config = {// 等級(jí)大圖片url地址courierRankBigUrl: 'images/grade2-icon.png',// 配送員等級(jí)名稱courierRankName: '3級(jí)鮮鋒官',// 同時(shí)可接單數(shù)courierCanPackgeCountDoing: '10',// 積分?jǐn)?shù)組1,2,3,4,5;50,100,150,200,250integrationRankString: '1,2,3,4,5;0,100,150,200,250',// 經(jīng)驗(yàn)豆數(shù)組1,2,3,4,5;50,100,150,200,250experienceBeanRankString: '',// 本月累計(jì)積分monthCompletedWaybills: '150'};</script>
/* 切記：實(shí)現(xiàn)進(jìn)度條的JS代碼一定要放在頭部，如果放在尾部的話，在手機(jī)端瀏覽器下是沒(méi)有進(jìn)度條的動(dòng)畫效果的，因?yàn)轫?yè)面先加載完后，就已經(jīng)設(shè)置了寬度 */<script>function setStyle(obj,css){for(var i in css){obj.style[i] = css[i];}}var scores = Config.integrationRankString.split(";")[1].split(',');// 后臺(tái)返回的積分var score = Config.monthCompletedWaybills;/* * 進(jìn)度條的寬度百分比的計(jì)算方式設(shè)計(jì)如下：* 假如第一段50分 第二段100分 第三段300分 第四段500分 那么假如服務(wù)器返回的是375分，那么在瀏覽器下占比如下* 由于頁(yè)面分了5段，每段顯示20%的寬度; 遍歷數(shù)組[50,100,300,500]，定義一個(gè)遍歷count = 0;* 如果數(shù)組任何一段小于服務(wù)器返回375的話，那么count自加1，因此count=3* 比例如下：(375 - 300) / (500 - 300) + 3 = 3/8 + 3 = 3.375; 最后 3.375 / 5 * 100%= 67.5%; * 記住 因?yàn)閿?shù)組arrs去掉了第一項(xiàng)了 所以curNum要減去1 即：curNum - 1 *//** @todo 計(jì)算進(jìn)度條的百分比* @param {score,arrs} 服務(wù)器返回的總分 服務(wù)器返回的數(shù)組*/var count = 0;function percent(score,arrs) {var tempCount = 0;var percent;// 如果積分大于數(shù)組最后一個(gè)總積分的話， 那么進(jìn)度條就是最大的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();}// 返回第五段的值 計(jì)算方法 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>

其他實(shí)現(xiàn)頁(yè)面的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"), // 進(jìn)度條id gradeImg = $Id("grade-img"), // 等級(jí)圖片iconcourierRankName = $Id("courierRankName"), // 配送員等級(jí)名稱gradeAmount = $Id("grade-amount"), // 可同時(shí)接單數(shù)monthScore = $Id("monthScore"), // 本月累計(jì)積分scoreGrade = $Id("progree-nums"), // 等級(jí)idprogressScore = $Id("progress-score"), // 積分iddivisionBar = $Id("division-bar"); // 進(jìn)度條分隔條// 服務(wù)器返回的等級(jí)圖片gradeImg.style.backgroundImage="url("+Config.courierRankBigUrl+")";// 服務(wù)器返回的等級(jí)名稱courierRankName.innerHTML = Config.courierRankName;// 可同時(shí)接單數(shù)gradeAmount.innerHTML = Config.courierCanPackgeCountDoing;// 本月累計(jì)積分monthScore.innerHTML = "(" + Config.monthCompletedWaybills + "分" + ")";if(Config.monthCompletedWaybills *1 < 0) {var minMonthScore = $Id("minMonthScore");if(!hasClass(minMonthScore,'current')) {addClass(minMonthScore,'current');}}// 服務(wù)器返回的等級(jí)和積分?jǐn)?shù)組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]+'級(jí)</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");// 后臺(tái)返回的積分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 正好數(shù)組也有200這個(gè)積分 正好相等的話 ，那么就不添加current類名if(i !== curIndex) {(function(i){setTimeout(function(){addClass(divisionBarSpans[i],'current');},2500);})(i)}}} }</script>

demo如下可以下載

轉(zhuǎn)載于:https://www.cnblogs.com/tugenhua0707/p/4433502.html

總結(jié)

以上是生活随笔為你收集整理的h5实现手机端等级进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。