html+css+js带数据储存功能的在线多人积分系统
积分数据储存功能是通过cookies实现的,所以如果不把该网页部署在web服务器上再去访问保存积分数据后读取积分时会提示没有积分数据。如果不想使用积分数据保存功能,那直接放到一个HTML文件中打开运行即可 源码在后面 保存积分数据后,刷新页面或重新打开,只要点击读取按钮就可以恢复上次的数据
在线演示(可以保存积分数据):http://38.14.250.184/score.html
如果不能访问,请注意协议头(http)不加s
如果放的源代码有缺失或有问题,请直接访问在线演示网址http://38.14.250.184/score.html
浏览器右键查看源代码复制即可
以下是图 点赞❤️+收藏⭐️+关注🙏 互粉必回
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多人在线积分系统</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #fff;
color: #ff0000;
padding: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
th, td {
padding: 10px;
text-align: center;
}
th {
background-color: #ff0000;
color: white;
}
td {
background-color: #fff0f0;
}
input[type="text"], input[type="number"] {
width: calc(100% - 22px);
padding: 10px;
margin: 5px 0;
border-radius: 10px;
border: 1px solid #ff0000;
}
button {
padding: 10px;
margin: 5px;
border-radius: 10px;
background-color: #ff0000;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #cc0000;
}
.container {
max-width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<h1>多人在线积分系统</h1>
<table id="scoreTable">
<thead>
<tr>
<th>成员</th>
<th>积分</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tableBody">
<!-- 动态内容 -->
</tbody>
</table>
<input type="text" id="memberName" placeholder="成员名称">
<input type="number" id="memberScore" placeholder="积分">
<button οnclick="addMember()">添加成员</button>
<button οnclick="saveScores()">保存积分数据</button>
<button οnclick="loadScores()">读取积分数据</button>
</div>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
console.log("设置Cookie: " + name + "=" + (value || "") + expires + "; path=/");
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function addMember() {
const name = document.getElementById('memberName').value;
const score = document.getElementById('memberScore').value;
if (name && score) {
const tableBody = document.getElementById('tableBody');
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${name}</td>
<td><span>${score}</span> <button οnclick="updateScore(this, 1)">+</button> <button οnclick="updateScore(this, -1)">-</button></td>
<td><button οnclick="deleteMember(this)">删除成员</button></td>
`;
tableBody.appendChild(newRow);
document.getElementById('memberName').value = '';
document.getElementById('memberScore').value = '';
}
}
function updateScore(button, change) {
const scoreSpan = button.parentElement.querySelector('span');
let currentScore = parseInt(scoreSpan.textContent);
currentScore += change;
scoreSpan.textContent = currentScore;
}
function deleteMember(button) {
const row = button.parentElement.parentElement;
row.parentElement.removeChild(row);
}
function saveScores() {
const rows = document.querySelectorAll('#tableBody tr');
const scores = [];
rows.forEach(row => {
const name = row.children[0].textContent;
const score = row.children[1].querySelector('span').textContent;
scores.push({ name, score });
});
const scoresStr = JSON.stringify(scores);
setCookie("scores", scoresStr, 7);
console.log("保存的积分数据: ", scoresStr);
alert('积分数据已保存');
}
function loadScores() {
const scoresStr = getCookie("scores");
console.log("读取到的Cookie字符串: ", scoresStr); // 调试信息
if (scoresStr) {
const scores = JSON.parse(scoresStr);
console.log("解析后的积分数据: ", scores); // 调试信息
const tableBody = document.getElementById('tableBody');
tableBody.innerHTML = '';
scores.forEach(({ name, score }) => {
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${name}</td>
<td><span>${score}</span> <button οnclick="updateScore(this, 1)">+</button> <button οnclick="updateScore(this, -1)">-</button></td>
<td><button οnclick="deleteMember(this)">删除成员</button></td>
`;
tableBody.appendChild(newRow);
});
alert('积分数据已读取');
} else {
alert('没有找到积分数据');
}
}
</script>
</body>
</html>
原文地址:https://blog.csdn.net/w11111xxxl/article/details/140390160
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!