<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8">
<title>赛博佛祖系统</title>
<linkrel="stylesheet"href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css">
</head>
<body>
<divclass="container py-5">
<h1class="text-center mb-4">赛博佛祖系统</h1>
<divclass="row justify-content-center mb-4">
<divclass="col-4 text-center">
<buttonid="woodfish-btn"class="btn btn-lg btn-primary">敲木鱼</button>
</div>
</div>
<divclass="row justify-content-center">
<divclass="col-6">
<tableclass="table table-bordered">
<thead>
<tr>
<th>排名</th>
<th>用户名</th>
<th>功德次数</th>
</tr>
</thead>
<tbodyid="rank-list">
</tbody>
</table>
</div>
</div>
</div>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<scriptsrc="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
<script>// 定义一个全局变量用于存储当前用户信息
var currentUser = null;
// 敲木鱼按钮的点击事件
$("#woodfish-btn").click(function() {
if(currentUser){
// 如果当前用户已存在,则只更新排行榜数据
currentUser.count++;
// 更新排行榜
updateRankList();
}else{
// 如果当前用户不存在,则提示输入用户名
varusername=prompt("请输入你的用户名:");
if(username){
// 创建新用户信息并记录为当前用户
currentUser={username:username,count:1};
// 更新排行榜
updateRankList();
}
}
});
// 更新排行榜
function updateRankList() {
// 使用localStorage存储排行榜数据
varrankData=localStorage.getItem("rankData");
if(rankData){
rankData=JSON.parse(rankData);
}else{
rankData=[];
}
if(currentUser){
// 如果有当前用户,则将其添加到排行榜
varuserExist=false;
for(vari=0;i<rankData.length;i++){
if(rankData[i].username===currentUser.username){
rankData[i].count=currentUser.count;
userExist=true;
break;
}
}
if(!userExist){
rankData.push(currentUser);
}
// 根据功德次数降序排序
rankData.sort(function(a,b){
returnb.count-a.count;
});
// 显示排行榜
varrankListHtml="";
for(vari=0;i<rankData.length;i++){
rankListHtml+="<tr><td>"+(i+1)+"</td><td>"+rankData[i].username+"</td><td>"+rankData[i].count+"</td></tr>";
}
$("#rank-list").html(rankListHtml);
// 更新localStorage中的排行榜数据
localStorage.setItem("rankData",JSON.stringify(rankData));
}
}
// 页面加载时更新排行榜
updateRankList();</script>
</body>
</html>