JSFiddle - React, Tailwind, and code Playground
by gothic
JavaScript
var creditList = [{
"iconNum": 1,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 1,
"maxCredit": 4000,
"name": "爱心1级",
"minCredit": 0
}, {
"iconNum": 2,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 2,
"maxCredit": 10000,
"name": "爱心2级",
"minCredit": 4001
}, {
"iconNum": 3,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 3,
"maxCredit": 20000,
"name": "爱心3级",
"minCredit": 10001
}, {
"iconNum": 1,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 4,
"maxCredit": 60000,
"name": "钻石1级",
"minCredit": 20001
}, {
"iconNum": 2,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 5,
"maxCredit": 180000,
"name": "钻石2级",
"minCredit": 60001
}, {
"iconNum": 3,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 6,
"maxCredit": 500000,
"name": "钻石3级",
"minCredit": 180001
}, {
"iconNum": 1,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 7,
"maxCredit": 2000000,
"name": "皇冠1级",
"minCredit": 500001
}, {
"iconNum": 2,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 8,
"maxCredit": 5000000,
"name": "皇冠2级",
"minCredit": 2000001
}, {
"iconNum": 3,
"image": "http://pre.res.xiaokakeji.com/ycdd/appweb/img/grade/grade2.png",
"level": 9,
"maxCredit": 10000001,
"name": "皇冠3级",
"minCredit": 5000001
}];
const _score = 49527;
const len = creditList.length
let _width = 0
var minScore
var maxScore
for (var i = 0; i < len; i++) {
console.log(1)
minScore = creditList[i].minCredit
maxScore = creditList[i].maxcredit
if (minScore < _score < maxScore) {
_width = ((_score - minScore) / (maxScore - minScore)) * (1 / len) + (i / len)
_width = _width * 100
// break
}
}
console.log(_width)