html动态排行榜代码
时间: 2023-08-12 19:05:41 浏览: 518
好的,以下是一个简单的 HTML 动态排行榜代码,仅供参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态排行榜</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* 样式表 */
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.title {
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
}
.rank {
display: inline-block;
width: 50px;
font-size: 24px;
font-weight: bold;
margin-right: 20px;
}
.name {
display: inline-block;
font-size: 24px;
margin-right: 20px;
}
.score {
display: inline-block;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">动态排行榜</h1>
<div id="ranklist">
<!-- 排行榜内容 -->
</div>
</div>
</body>
<script type="text/javascript">
// JavaScript 代码部分
var ranklist = document.getElementById("ranklist");
var data = [
{rank: 1, name: "张三", score: 100},
{rank: 2, name: "李四", score: 90},
{rank: 3, name: "王五", score: 80}
];
// 初始化排行榜
initRanklist(data);
// 更新排行榜数据
setInterval(function() {
updateRanklist(data);
}, 5000);
// 初始化排行榜函数
function initRanklist(data) {
var html = "";
for (var i = 0; i < data.length; i++) {
html += "<div><span class='rank'>" + data[i].rank + "</span><span class='name'>" + data[i].name + "</span><span class='score'>" + data[i].score + "分</span></div>";
}
ranklist.innerHTML = html;
}
// 更新排行榜函数
function updateRanklist(data) {
// 模拟数据更新
for (var i = 0; i < data.length; i++) {
data[i].score += Math.floor(Math.random() * 10);
}
data.sort(function(a, b) {
return b.score - a.score;
});
for (var i = 0; i < data.length; i++) {
data[i].rank = i + 1;
}
initRanklist(data);
}
</script>
</html>
```
以上代码实现了一个简单的动态排行榜页面,包括 HTML、CSS 和 JavaScript 三部分。其中 JavaScript 部分实现了初始化排行榜和更新排行榜的功能,每隔 5 秒钟自动更新排行榜数据。您可以根据自己的需求和技术水平进行修改和扩展。