问题描述
我想找到一种方法来创建一个像下面这样的排行榜，它使用变量在 Javascript 上保存用户点数，以便通过改变用户排名来响应这些点数的变化......
这是我想要实现的目标：
我只想仅使用 Javascript 变量手动填写用户的积分数据……所有数据都将来自 javascript 数组。
就像是 ：
user_1 = Nilesh S;
user_2 = Shristi_S;
user_1 points = 1710;
user_2 points = 1710;
etc...
显然，如果我将 Nilesh S (user_1) 点数更改为 1000，那么 Nilesh S 排名将是第 10 位...
我现在所取得的成就只是创建那些圆形个人资料图片:)
以下是代码：
Javascript：
var img = document.createElement("IMG");
img.setAttribute("src", "img_pulpit.jpg");
img.setAttribute("width", "300");
img.setAttribute("height", "300");
img.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(img);
HTML：
<div id="IMG">
<script src="Script.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">
[1]: https://i.stack.imgur.com/zXm4N.png
CSS：
img {
background: #2f293d;
border: 1px solid #2f293d;
padding: 6px;
border-radius: 50%;
box-shadow: .6rem .5rem 1rem rgba(0, 0, 0, .5);
}
任何解决方案将不胜感激。
1楼
dmikester1
0
已采纳
2019-03-02 21:48:58
这是在对象数组中创建一些虚拟数据、对其进行排序并将其添加到页面的快速而肮脏的方法。
// this is the array that will hold all the profile objects let profiles = []; let profile1 = {}; profile1.name = "Jim Bob"; profile1.points = 1500; profiles.push(profile1); let profile2 = {}; profile2.name = "Jane Smith"; profile2.points = 1600; profiles.push(profile2); let profile3 = {}; profile3.name = "Mike Jones"; profile3.points = 400; profiles.push(profile3); let profile4 = {}; profile4.name = "Sally Peterson"; profile4.points = 1900; profiles.push(profile4); // sort the array by points // b - a will make highest first, swap them so a - b to make lowest first profiles.sort(function(a, b) { return b.points-a.points; }) let profilesDiv = document.getElementsByClassName('profiles')[0]; profiles.forEach(function(entry) { let profile = document.createElement('div'); profile.className = "profile"; profile.textContent = entry.name + " -- " + entry.points; profilesDiv.appendChild(profile); });
.profile { border: 2px solid #222222; padding: 5px; margin: 5px; width: 50%; }
<div class="profiles"> </div>