html+css+js带数据储存功能的在线多人积分系统-CSDN博客

本文链接：https://blog.csdn.net/w11111xxxl/article/details/140390160

积分数据储存功能是通过cookies实现的，所以如果不把该网页部署在web服务器上再去访问保存积分数据后读取积分时会提示没有积分数据。如果不想使用积分数据保存功能，那直接放到一个HTML文件中打开运行即可源码在后面保存积分数据后，刷新页面或重新打开，只要点击读取按钮就可以恢复上次的数据

在线演示（可以保存积分数据）：http://38.14.250.184/score.html

如果不能访问，请注意协议头（http）不加s

如果放的源代码有缺失或有问题，请直接访问在线演示网址http://38.14.250.184/score.html

浏览器右键查看源代码复制即可

以下是图点赞❤️+收藏⭐️+关注🙏 互粉必回

源代码

<!DOCTYPE html>

<head>

<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>

<h1>多人在线积分系统</h1>

<thead>

<tr>

</tr>

</thead>

</tbody>

</table>

<button οnclick="saveScores()">保存积分数据</button>

<button οnclick="loadScores()">读取积分数据</button>

</div>

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><span>${score}</span> <button οnclick="updateScore(this, 1)">+</button> <button οnclick="updateScore(this, -1)">-</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><span>${score}</span> <button οnclick="updateScore(this, 1)">+</button> <button οnclick="updateScore(this, -1)">-</button></td>

tableBody.appendChild(newRow);

});

alert('积分数据已读取');

} else {

alert('没有找到积分数据');

}

</script>

</body>

</html>