Javascript 创建自适应排行榜

下面的代码创建了一个排行榜，用户排名从1到10，结果如下：

正如你所看到的，有10个用户有他们的个人资料图片和他们的名字，等等。。。排名从1到10

填写排行榜所需的所有数据都将来自我们目前与之无关的服务器，例如，保存用户积分的阵列

现在的问题是，我不知道如何修改代码以将此功能添加到我的排行榜：

让我们想象一个用户，一个正在查看笔记本电脑排行榜的参与者，看看他/她获得了哪个排名。好啊 我们称他/她为主要用户

例如，如果主要用户处于第1至第10名和第5名之间，排行榜应仅包括他并突出显示他：

如果主要用户的排名不是从1到10，例如，他的排名是1025，则排行榜将他包括在第10位，仅显示他达到的排名：

代码如下：

JS

//这是将容纳所有轮廓对象的数组 设profiles=[]； 让profile1={}； profile1.name=Jim Bob； 档案1.工作=医生； 轮廓1.点=1500； profile1.level=15； profile1.img=https://randomuser.me/api/portraits/men/12.jpg; profile1.imgDiamonds=Diamonds.png； profiles.pushprofile1； 设profile2={}； profile2.name=Jane tanha； 档案2.工作=牙医； 2.2分=2000分； profile2.level=1； profile2.img=https://randomuser.me/api/portraits/women/22.jpg; profile2.imgDiamonds=Diamonds.png； profiles.pushprofile2； 设profile3={}； profile3.name=迈克·琼斯； profile3.job=Medic； profile3.0点=4000； profile3.level=5； profile3.img=https://randomuser.me/api/portraits/men/22.jpg; profile3.imgDiamonds=Diamonds.png； profiles.pushprofile3； 设profile4={}； profile4.name=Sally Peterson； 概况4.工作=农业； profile4.0点=1900； profile4.level=55； profile4.img=https://randomuser.me/api/portraits/women/24.jpg; profile4.imgDiamonds=Diamonds.png； 剖面图4； 设profile5={}； profile5.name=Sally Peterson； profile5.job=抽水机； 剖面图5.点=1100； 剖面图5.1级=4级； profile5.img=https://randomuser.me/api/portraits/women/24.jpg; profile5.imgDiamonds=Diamonds.png； profiles.5； 设profile6={}； profile6.name=Sally Peterson； profile6.job=母亲； profile6.0点=1400； profile6.level=85； profile6.img=https://randomuser.me/api/portraits/women/24.jpg; profile6.imgDiamonds=Diamonds.png； profiles.6； 设profile7={}； profile7.name=Sally Peterson； 档案7.工作=护士； profile7.7点=1400； profile7.level=11； profile7.img=https://randomuser.me/api/portraits/women/24.jpg; profile7.imgDiamonds=Diamonds.png； profiles.7； 设profile8={}； profile8.name=Sally Peterson； profile8.job=出租车潜水员； 剖面图8.8点=1400； profile8.level=17； profile8.img=https://randomuser.me/api/portraits/women/24.jpg; profile8.imgDiamonds=Diamonds.png； 剖面图8； 设profile9={}； profile9.name=Sally Peterson； profile9.job=高中生； 剖面图9.9点=1400； profile9.level=37； profile9.img=https://randomuser.me/api/portraits/women/24.jpg; profile9.imgDiamonds=Diamonds.png； profiles.9； 让profile10={}； profile10.name=Sally Peterson； profile10.job=学生； 轮廓10.0点=1500； profile10.level=14； profile10.img=https://randomuser.me/api/portraits/women/24.jpg; profile10.imgDiamonds=Diamonds.png； 简介10； //按点对数组排序 //b-a会先升到最高点，交换它们使a-b先升到最低点 profiles.sort函数a，b{ 返回b点-a点； } 让计数=1； profiles.forEachfunctionentry{ 让profilesDiv=document.getElementsByClassName'profiles'[Math.floorcount-1/5]； 让img=document.createElement'img'； img.className=profilePic； img.src=entry.img； 让imgDiamonds=document.createElement'img'； imgDiamonds.className=profileDia； imgDiamonds.src=entry.imgDiamonds； 让profile=document.createElement'div'； profile.className=profile； profile.innerHTML=+entry.name+； 让job=document.createElement'span'； job.className=job； job.textContent=entry.job； profile.job； profile.prependimg； profile.prependimgDiamonds； 让points=document.createElement'span'； points.className=点； points.textContent=entry.points； profile.appendChildpoints； profile.prependimg； profile.prependimgDiamonds； 让level=document.createElement'span'； level.className=level； level.textContent=entry.level； profile.1级； profile.prependimg； profile.prependimgDiamonds； var span=document.createElementspan； span.textContent=计数+'； span.className=计数； profile.prependspan； 档案IV.儿童档案； 计数++； }; .行{ 显示器：flex； } .栏目{ 弹性：50%； } .个人资料{ 填充：10px； 利润率：100px 70px 0px 0px； 宽度：50%； 高度：60px； 框大小：边框框； } .profile.name{ 右边距：-210px； 浮动：对； 宽度：200px； 高度：50px； } .简介.工作{ 右边距：-210px； 边缘顶部：25px； 浮动：对； 宽度：200px； 高度：50px； } .profile.count{ 浮动：左； 右边距：5px； 字体系列：Helvetica Neue； 字号：200； src:urlhelveticaneue-ultrathin.woff； 颜色：E6E0EC； 字体大小：55px； } .profile img.profilePic{ 位置：绝对位置； 余量：-50px 70px 50px 90px； 背景：2f293d； 边框：1px实心2f293d； 填充：4px； 边界半径：50%； 盒影：.2rem.2rem 1rem rgba0,0,0,5； } .profile img.profileDia{ 位置：绝对位置； 利润率：-10px 70px 50px 520px； 宽度：2%； 高度：自动； } .要点{ 位置：绝对位置； 利润率：0px 100px 100px 450px； 浮动：对； 字体系列：Helvetica Neue； 字号：800； src:urlhelveticaneue-ultrathin.woff； 颜色：008CBA； } .级别{ 位置：绝对位置； 利润率：35px 100px 100px 230px； 浮动：对； 字体系列：Helvetica Neue； 字号：800； src:urlhelveticaneue-ultrathin.woff； 颜色：ed0909； 字体大小：20px； 显示：块； 高度：60px； 宽度：60px； 线高：60px； -moz边界半径：30px； /*或50%*/ 边界半径：30px； /*或50%*/ 背景色：黑色； 颜色：白色； 文本对齐：居中； 字号：1.5em； }

---

这种情况可以通过几种方式解决。没有一个好的CSS属性来解决这个问题

一种方法是预先估计每个块将占用的最大空间量，然后确定它们的尺寸。或者使用基于网格的设计方法，注意这些空间限制

---

第二种方法是减小数字的字体大小，并尝试将它们放在当前块中，这样即使它们有四位数长，也不会移动以下内容。

有什么问题吗？我会编辑以解释问题。我会将排行榜用户与登录用户进行比较，假设它们存储在某个位置。如果用户匹配，则将适当的CSS类应用于该用户DOM元素。检查是否在前十名，是否申请绿色等级或w/e。否则，应用red类并将pos.10替换为userapplicating适当的CSS类到该用户DOM元素并将秩10更改为1025实际上是我最大的问题…谢谢@synon的编辑…这真的很有帮助…谢谢你的回答。。。加一。。。我想你说的是第十级的右倾，对吧？！但我的主要问题是在排行榜上添加解释功能。你如何计算排名？它是否来自后端？计算当前用户的排名是您的问题吗？您也可以将所有内容放在一个简单的html表中，但是可以工作，请注意，您应该将其拆分为两个表，以获得左右排行榜，否则html会变得复杂