我很难找到一种方法来创建一个下面的排行榜,它使用变量来保存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);
}
任何解决方案将不胜感激。
下面是一种快速而又脏的方法,可以在对象数组中创建一些虚拟数据,对其进行排序并将其添加到页面中。
// 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>