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++) {
          const minScore = creditList[i].minCredit
          const maxScore = creditList[i].maxCredit
          if (minScore < _scored < maxScore) {
            _width = ((_scored - minScore) / (maxScore - minScore)) * (1 / len) + (i / len)
            _width = _width * 100
         ...