王者荣耀段位js实现。
每一个等级的提升都是一个数字的增加，而至于段位不过是划分而已。找到范围就是了。
王者荣耀的段位可以分3个层级
铜、银、铁.. 是最外层的等级
然后就是'I', 'II', 'III', 'IV', 'V'
再是 最后的等级
代码
/**
* 段位等级
* num 等级数字
*/
const getGrade = (num) => {
var luomashuzi = ['I', 'II', 'III', 'IV', 'V']
var data = [
{ x: 3, y: 3, name: '青铜' },
{ x: 4, y: 4, name: '白银' },
{ x: 4, y: 4, name: '黄金' },
{ x: 5, y: 5, name: '铂金' },
{ x: 5, y: 5, name: '钻石' },
]
data = data.map(e => ({ ...e, total: e.x * e.y }))
for (var d = 0; d < data.length; d++) {
data[d].range = [...data].splice(0, d).map(e => e.total).reduce((a, b) => a + b, 0)
}
// console.log(data)
for (var d = 0; d < data.length; d++) {
var item = data[d]
var x = item.x
var y = item.y
// 段位判断
if (num > item.range && num <= item.total + item.range) {
for (let i = 1; i <= y; i++) {
// 获取第二段位
if (num - item.range <= y * i) {
// 获取第四段位（星级）并返回结果
return {
y: item.y,
name: item.name + ' ' + luomashuzi[x - i],
star: (x - (x * i - (num - item.range)))
}
}
}
}
}
return {
name: '学霸',
star: num - data.map(e => e.total).reduce((a, b) => a + b, 0)
}
}
(上面是js代码和小程序没啥关系，不过写的示例是在小程序上面，所以归类小程序)
使用
this.setData({
grade_list: new Array(100).fill(0).map((_, i) => i + 1)
// grade_list: [9, 50, 100]
.map(util.getGrade)
.map(e => {
if(e.name == '学霸'){
return {
...e,
isTopGrade: true,
}
}
return { ...e, star: this.setStar(e.y, e.star), isTopGrade: false,}
})
})
<view wx:for="{{grade_list}}">
<text>{{item.name}}</text>
<view class="img-box" wx:if="{{!item.isTopGrade}}">
<image wx:for="{{item.star}}" :key="key" class="{{item == 0 ? 'gray' : 'full'}}" src="{{item == 0 ? '/image/gray-star.png' : '/image/star.png'}}"></image>
</view>
<text wx:else>{{item.star}}</text>
</view>
打印看看
var v = ``
for(let i = 1; i = 100; i++){
v += i + ': ' + JSON.stringify(getGrade(i)) + '\n'
}
console.log(v)
打印结果
1: {"y":3,"name":"青铜 III","star":1}
2: {"y":3,"name":"青铜 III","star":2}
3: {"y":3,"name":"青铜 III","star":3}
4: {"y":3,"name":"青铜 II","star":1}
5: {"y":3,"name":"青铜 II","star":2}
6: {"y":3,"name":"青铜 II","star":3}
7: {"y":3,"name":"青铜 I","star":1}
8: {"y":3,"name":"青铜 I","star":2}
9: {"y":3,"name":"青铜 I","star":3}
10: {"y":4,"name":"白银 IV","star":1}
11: {"y":4,"name":"白银 IV","star":2}
12: {"y":4,"name":"白银 IV","star":3}
13: {"y":4,"name":"白银 IV","star":4}
14: {"y":4,"name":"白银 III","star":1}
15: {"y":4,"name":"白银 III","star":2}
16: {"y":4,"name":"白银 III","star":3}
17: {"y":4,"name":"白银 III","star":4}
18: {"y":4,"name":"白银 II","star":1}
19: {"y":4,"name":"白银 II","star":2}
20: {"y":4,"name":"白银 II","star":3}
21: {"y":4,"name":"白银 II","star":4}
22: {"y":4,"name":"白银 I","star":1}
23: {"y":4,"name":"白银 I","star":2}
24: {"y":4,"name":"白银 I","star":3}
25: {"y":4,"name":"白银 I","star":4}
26: {"y":4,"name":"黄金 IV","star":1}
27: {"y":4,"name":"黄金 IV","star":2}
28: {"y":4,"name":"黄金 IV","star":3}
29: {"y":4,"name":"黄金 IV","star":4}
30: {"y":4,"name":"黄金 III","star":1}
31: {"y":4,"name":"黄金 III","star":2}
32: {"y":4,"name":"黄金 III","star":3}
33: {"y":4,"name":"黄金 III","star":4}
34: {"y":4,"name":"黄金 II","star":1}
35: {"y":4,"name":"黄金 II","star":2}
36: {"y":4,"name":"黄金 II","star":3}
37: {"y":4,"name":"黄金 II","star":4}
38: {"y":4,"name":"黄金 I","star":1}
39: {"y":4,"name":"黄金 I","star":2}
40: {"y":4,"name":"黄金 I","star":3}
41: {"y":4,"name":"黄金 I","star":4}
42: {"y":5,"name":"铂金 V","star":1}
43: {"y":5,"name":"铂金 V","star":2}
44: {"y":5,"name":"铂金 V","star":3}
45: {"y":5,"name":"铂金 V","star":4}
46: {"y":5,"name":"铂金 V","star":5}
47: {"y":5,"name":"铂金 IV","star":1}
48: {"y":5,"name":"铂金 IV","star":2}
49: {"y":5,"name":"铂金 IV","star":3}
50: {"y":5,"name":"铂金 IV","star":4}
51: {"y":5,"name":"铂金 IV","star":5}
52: {"y":5,"name":"铂金 III","star":1}
53: {"y":5,"name":"铂金 III","star":2}
54: {"y":5,"name":"铂金 III","star":3}
55: {"y":5,"name":"铂金 III","star":4}
56: {"y":5,"name":"铂金 III","star":5}
57: {"y":5,"name":"铂金 II","star":1}
58: {"y":5,"name":"铂金 II","star":2}
59: {"y":5,"name":"铂金 II","star":3}
60: {"y":5,"name":"铂金 II","star":4}
61: {"y":5,"name":"铂金 II","star":5}
62: {"y":5,"name":"铂金 I","star":1}
63: {"y":5,"name":"铂金 I","star":2}
64: {"y":5,"name":"铂金 I","star":3}
65: {"y":5,"name":"铂金 I","star":4}
66: {"y":5,"name":"铂金 I","star":5}
67: {"y":5,"name":"钻石 V","star":1}
68: {"y":5,"name":"钻石 V","star":2}
69: {"y":5,"name":"钻石 V","star":3}
70: {"y":5,"name":"钻石 V","star":4}
71: {"y":5,"name":"钻石 V","star":5}
72: {"y":5,"name":"钻石 IV","star":1}
73: {"y":5,"name":"钻石 IV","star":2}
74: {"y":5,"name":"钻石 IV","star":3}
75: {"y":5,"name":"钻石 IV","star":4}
76: {"y":5,"name":"钻石 IV","star":5}
77: {"y":5,"name":"钻石 III","star":1}
78: {"y":5,"name":"钻石 III","star":2}
79: {"y":5,"name":"钻石 III","star":3}
80: {"y":5,"name":"钻石 III","star":4}
81: {"y":5,"name":"钻石 III","star":5}
82: {"y":5,"name":"钻石 II","star":1}
83: {"y":5,"name":"钻石 II","star":2}
84: {"y":5,"name":"钻石 II","star":3}
85: {"y":5,"name":"钻石 II","star":4}
86: {"y":5,"name":"钻石 II","star":5}
87: {"y":5,"name":"钻石 I","star":1}
88: {"y":5,"name":"钻石 I","star":2}
89: {"y":5,"name":"钻石 I","star":3}
90: {"y":5,"name":"钻石 I","star":4}
91: {"y":5,"name":"钻石 I","star":5}
92: {"name":"学霸","star":1}
93: {"name":"学霸","star":2}
94: {"name":"学霸","star":3}
95: {"name":"学霸","star":4}
96: {"name":"学霸","star":5}
97: {"name":"学霸","star":6}
98: {"name":"学霸","star":7}
99: {"name":"学霸","star":8}
100: {"name":"学霸","star":9}
--完--
