html+css+js写的多人在线积分系统

可以添加成员,成员名称自定义

可以对各个成员加分减分➕➖

可以删除成员

源码在图片下面,记得点赞加关注❤️❤️❤️

界面

源代码

<!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: #f8f9fa;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

.container {

background-color: #fff;

padding: 20px;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0,0,0,0.1);

width: 80%;

}

table {

width: 100%;

border-collapse: collapse;

margin-top: 20px;

}

th, td {

border: 1px solid #ddd;

padding: 8px;

text-align: left;

}

th {

background-color: #f2f2f2;

}

tr:nth-child(even) {

background-color: #f2f2f2;

}

button {

background-color: #dc3545;

color: white;

border: none;

padding: 5px 10px;

border-radius: 5px;

cursor: pointer;

margin-right: 5px;

}

button:hover {

background-color: #c82333;

}

.add-member {

display: flex;

justify-content: space-between;

margin-bottom: 20px;

}

</style>

</head>

<body>

<div class="container">

<h2>在线积分系统</h2>

<div class="add-member">

<input type="text" id="memberName" placeholder="输入成员名称">

<button οnclick="addMember()">添加成员</button>

</div>

<table>

<thead>

<tr>

<th>成员</th>

<th>分数</th>

<th>操作</th>

</tr>

</thead>

<tbody id="membersTableBody">

</tbody>

</table>

</div>

<script>

const membersTableBody = document.getElementById('membersTableBody');

const memberNameInput = document.getElementById('memberName');

const members = [];

function addMember() {

const memberName = memberNameInput.value.trim();

if (memberName) {

members.push({ name: memberName, score: 0 });

memberNameInput.value = '';

renderMembers();

}

}

function removeMember(memberIndex) {

members.splice(memberIndex, 1);

renderMembers();

}

function adjustScore(memberIndex, delta) {

members[memberIndex].score += delta;

renderMembers();

}

function renderMembers() {

membersTableBody.innerHTML = '';

members.forEach((member, index) => {

const row = `

<tr>

<td>${member.name}</td>

<td>${member.score}</td>

<td>

<button οnclick="adjustScore(${index}, 1)">+1</button>

<button οnclick="adjustScore(${index}, -1)">-1</button>

<button οnclick="removeMember(${index})">删除</button>

</td>

</tr>

`;

membersTableBody.insertAdjacentHTML('beforeend', row);

});

}

// 初始化渲染成员列表

renderMembers();

</script>

</body>

</html>

相关推荐
江城开朗的豌豆20 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记30 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆31 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句34 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜35 分钟前
CommonJS与ESM
前端·javascript
G等你下课36 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven37 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾37 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我37 分钟前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪38 分钟前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构