班级积分管理系统

简单高效的班级积分管理工具，帮助老师轻松记录学生表现，激励学生进步

.btn-sort
{
        background: #3399CC ;
        color: white;
        padding: 12px 24px;
        width: 140px;
}
        .btn-import {
        background: #4db6ac;
        color: white;
        padding: 12px 24px;
        width: 133px;
        }
       
        .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 20px;
        width: 100%;
        padding: 10px;
        }
       
        .student-card {
        background: white;
        border-radius: 15px;
        padding: 10px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        text-align: center;
        transition: all 0.3s ease;
        animation: fadeIn 0.8s ease;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        }
       
        .student-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.12);
        }
       
        .student-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(90deg, #4db6ac, #26a69a);
        }
       
        .student-name {
        font-size: 18px;
        color: #455a64;
        margin-bottom: 15px;
        font-weight: 600;
        }
       
        .score {
        font-size: 40px;
        font-weight: bold;
        margin: 10px 0 20px;
        color: #2a7a8c;
        transition: all 0.3s ease;
        }
       
        .score-changed {
        animation: pulse 0.5s ease;
        }
       
        .btn-group {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: auto;
        }
       
        .btn-minus {
        background: linear-gradient(135deg, #ef5350 0%, #e53935 100%);
        color: white;
        width: 40px;
        height: 40px;
        font-size: 18px;
        }
       
        .btn-plus {
        background: linear-gradient(135deg, #4db6ac 0%, #26a69a 100%);
        color: white;
        width: 40px;
        height: 40px;
        font-size: 18px;
        }
       
        .btn-custom {
        background: linear-gradient(135deg, #7986cb 0%, #5c6bc0 100%);
        color: white;
        width: 40px;
        height: 40px;
        font-size: 16px;
        }
       
        @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
        }
       
        @keyframes slideUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
        }
       
        @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.2); }
        100% { transform: scale(1); }
        }
       
        .toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(42, 122, 140, 0.9);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 14px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 1000;
        animation: fadeInUp 0.3s ease, fadeOut 0.3s ease 2.7s forwards;
        pointer-events: none;
        }
       
        @keyframes fadeInUp {
        from { transform: translate(-50%, 20px); opacity: 0; }
        to { transform: translate(-50%, 0); opacity: 1; }
        }
       
        @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
        }
        </style>
        <div class="header">
        <h1 style="display: flex;justify-content: center;align-items: center;flex-wrap: wrap;white-space: nowrap;"><img style="height: 60px;margin-right: 10px;" src="https://jbang-ai-v2.oss-cn-shenzhen.aliyuncs.com/ai/other/image/20250305105743ewai.png"> 班级学生积分管理系统</h1>
        <div class="controls">
        <button class="btn-add-all" onclick="addToAll()">
        <span style="margin-right: 8px;">➕</span> 全班加分
        </button>
        <button class="btn-reset" onclick="resetAll()">
        <span style="margin-right: 8px;">🔄</span> 全班清零
        </button>
        <button class="btn-add-one-all" onclick="addOneAll()">
         <span style="margin-right: 8px;">➕</span> 全班加1分
       </button>
       <button class="btn-minus-one-all" onclick="minusOneAll()">
         <span style="margin-right: 8px;">➖ </span>全班减1分
       </button>

<button class="btn-export-excel" onclick="exportToExcel()">
     <span style="margin-right: 8px;">📊  </span>导出Excel
                              </button>

<button class="btn-sort" onclick="sortByScore()">
     <span style="margin-right: 8px;">🔻  </span>最高分排序
                              </button>

<button class="btn-export" onclick="handlerExportData()">
         <span style="margin-right: 8px;">📤 </span>备份数据
       </button>
       <button class="btn-import" onclick="handlerImportData()">
         <span style="margin-right: 8px;">📥 </span>导入备份
       </button>
        </div>
        </div>
       
        <div class="container" id="container">
        
        </div>
       
        <script>
let students = [
      '朱梦璐', '陶逸航', '唐欢淇', '谭雅馨', '熊志鸿',
      '白谨睿', '莫小乔', '曹曼', '罗恩夕', '莫振宇',
      '汤雨泽', '肖倩', '王佳琪', '赵良伟', '罗梦',
      '莫家懿', '雷雨轩', '黄玉婷', '王晨熙', '梁思雨',
      '赵逸晨', '首正权', '唐佳', '莫馥伟', '杨嘉晨',
      '杨宇澎'
    ];
let localStorageKey = '6997241538764582';
if(!localStorageKey){
  localStorageKey = 'studentsList'
}
function initStudents() {
  let localData = localStorage.getItem(localStorageKey);
  if (localData) {
    try {
      let localStudentData = JSON.parse(localData);
      console.log(localStudentData)
      if (Array.isArray(localStudentData)) {
        console.log(localStudentData.map, ' localStudentData.map')
        students = localStudentData.map(function (item) {
          return item.studentName
        })
        return localStudentData
      }
    } catch (err) {
      console.log(err, 'err')
    }
  }

let localStudentData = students.map(item => {
    return {
      studentName: item,
      score: 0
    }
  })
  localStorage.setItem(localStorageKey, JSON.stringify(localStudentData));
  return localStudentData
}
let localData = initStudents()
// 把数据存入本地
function setLocalData(data) {
  console.log(data, 'data')
  localStorage.setItem(localStorageKey, JSON.stringify(data));
}

function initializeStudentCards() {
  const container = document.getElementById('container');
  container.innerHTML = '';

students.forEach((name, index) => {
    const card = document.createElement('div');
    card.className = 'student-card';
    card.style.animationDelay = index * 0.05 + 's';

card.innerHTML = `
<div class="student-name">` + name + `</div>
<div class="score" id="score-` + index + `">` + localData[index].score + `</div>
<div class="btn-group">
<button class="btn-minus" onclick="updateScore(` + index + `, -1)">-</button>
<button class="btn-custom" onclick="customScore(` + index + `)">±</button>
<button class="btn-plus" onclick="updateScore(` + index + `, 1)">+</button>
</div>
`;

container.appendChild(card);
  });
}

// 更新单个学生的分数
function updateScore(index, value) {
  const scoreElement = document.getElementById('score-' + index);
  const currentScore = parseInt(scoreElement.textContent);
  const newScore = currentScore + value;

scoreElement.textContent = newScore;

scoreElement.classList.add('score-changed');

// 移除动画类以便下次使用
  setTimeout(() => {
    scoreElement.classList.remove('score-changed');
  }, 500);

localData[index].score = newScore
  setLocalData(localData)

// 显示提示信息
  showToast(students[index] + (value > 0 ? '加' : '减') + '了 ' + Math.abs(value) + ' 分');
}

// 自定义分数变化
function customScore(index) {
  const value = prompt('请输入要为' + students[index] + '增减的分数（正数为加分，负数为减分）：');

if (value !== null && value.trim() !== '') {
    const numValue = parseInt(value);
    if (!isNaN(numValue)) {
      updateScore(index, numValue);
    } else {
      showToast('请输入有效的数字');
    }
  }
}

// 全班加分
function addToAll() {
  const value = prompt('请输入要为全班增减的分数（正数为加分，负数为减分）：');

if (value !== null && value.trim() !== '') {
    const numValue = parseInt(value);
    if (!isNaN(numValue)) {
      students.forEach((_, index) => {
        const scoreElement = document.getElementById('score-' + index);
        const currentScore = parseInt(scoreElement.textContent);
        scoreElement.textContent = currentScore + numValue;
        scoreElement.classList.add('score-changed');
        localData[index].score = currentScore + numValue;

setTimeout(() =>{
          scoreElement.classList.remove('score-changed');
        }, 500);
      });

showToast('全班' + (numValue >0 ? '加' : '减') + '了' + Math.abs(numValue) + '分');
      setLocalData(localData)

} else {
      showToast('请输入有效的数字');
    }
  }
}

// 全班清零
function resetAll() {
  if (confirm('确定要清零所有学生的积分吗？')) {
    students.forEach((_, index) => {
      const scoreElement = document.getElementById('score-' + index);
      scoreElement.textContent = 0;
      scoreElement.classList.add('score-changed');
      localData[index].score = 0

setTimeout(() => {
        scoreElement.classList.remove('score-changed');
      }, 500);
    });
    setLocalData(localData)

showToast('已清零全班积分');
  }
}

// 全班加一
function addOneAll() {
  if (confirm('确定要给学生的添加积分吗？')) {
    students.forEach((_, index) => {
      const scoreElement = document.getElementById('score-' + index);
      let newValue = parseInt(scoreElement.textContent) + 1
      scoreElement.textContent = newValue
      scoreElement.classList.add('score-changed');
      localData[index].score = newValue

setTimeout(() => {
        scoreElement.classList.remove('score-changed');
      }, 500);
    });
    setLocalData(localData)

//  showToast('已清零全班积分');
    showToast('全班加了1分');
  }
}
// 全班减一
function minusOneAll() {
  if (confirm('确定要给减少学生积分吗？')) {
    students.forEach((_, index) => {
      const scoreElement = document.getElementById('score-' + index);
      let newValue = parseInt(scoreElement.textContent) - 1
      scoreElement.textContent = newValue
      scoreElement.classList.add('score-changed');
      localData[index].score = newValue

setTimeout(() => {
        scoreElement.classList.remove('score-changed');
      }, 500);
    });

setLocalData(localData)
    //  showToast('已清零全班积分');
    showToast('全班减了1分');
  }
}

// 显示提示信息
function showToast(message) {
  // 先移除可能存在的旧提示
  const existingToast = document.querySelector('.toast');
  if (existingToast) {
    existingToast.remove();
  }

const toast = document.createElement('div');
  toast.className = 'toast';
  toast.textContent = message;
  document.body.appendChild(toast);

// 3秒后自动移除提示
  setTimeout(() => {
    toast.remove();
  }, 3000);
}

// 页面加载完成后初始化
window.onload = initializeStudentCards;

// 点击导入数据
function handlerImportData() {
  importJSON(function (json) {
    localStorage.setItem(localStorageKey, JSON.stringify(json));
    localData = initStudents()
    initializeStudentCards()

})
}
// 导出Excel文件
        function exportToExcel() {
            // 准备CSV内容
            let csvContent = "data:text/csv;charset=utf-8,\ufeff"; // \ufeff是BOM头，防止中文乱码
            // 添加标题行
            csvContent += "学生名,积分\r\n";

// 添加数据行
            localData.forEach(item => {
                csvContent += item.studentName+','+item.score+'\r\n';
            });

// 创建下载链接
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "班级积分表.csv");
            document.body.appendChild(link);

// 触发下载
            link.click();
            document.body.removeChild(link);
            
            showToast('Excel文件导出成功！');
        }
        // 排序
function sortByScore() {
  localData = localData.sort((a,b)=>b.score-a.score)
  students  = localData.map(function (item) {
          return item.studentName
        })
    initializeStudentCards()
  
}
// 点击导出数据
function handlerExportData() {
  exportJSON(localData)
}
// 导出json
function exportJSON(data, filename = 'data.json') {
  // 将JavaScript对象转换为JSON字符串
  const jsonString = JSON.stringify(data, null, 2);

// 创建Blob对象
  const blob = new Blob([jsonString], { type: 'application/json' });

// 创建下载链接
  const url = URL.createObjectURL(blob);

// 创建一个临时的a标签用于下载
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;

// 触发点击事件进行下载
  document.body.appendChild(a);
  a.click();

// 清理
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 导入json
function importJSON(callback) {
  // 创建文件输入元素
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = 'application/json';

// 监听文件选择事件
  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (!file) return;

const reader = new FileReader();

// 文件读取完成后的处理
    reader.onload = (e) => {
      try {
        const jsonData = JSON.parse(e.target.result);
        callback(jsonData);
      } catch (error) {
        console.error('解析JSON文件时出错:', error);
      }
    };

// 读取文件内容
    reader.readAsText(file);
  });

// 触发文件选择对话框
  fileInput.click();
}
  </script>

🏆 积分管理

为每位学生单独记录积分，可以进行加分、减分操作，记录学生表现。

👨‍👩‍👧‍👦 全班操作

支持全班统一加分或减分，以及全班积分清零，方便集体奖惩管理。

💡 使用提示

· 点击学生卡片上的"+1"或"-1"按钮调整个人积分

· 使用"全班加分"功能可以一次性给所有学生加分或减分

· 学期结束时可使用"全班清零"重置所有积分

· 重要提醒：避免积分数据丢失，建议每次操作积分更新后，「导出数据」到电脑/手机上作为备份以便后续找回。在积分页面中点击「导入数据」可还原备份数据！

【下载网页】

【更多游戏】

班级积分管理系统

🏆 积分管理

👨‍👩‍👧‍👦 全班操作

💡 使用提示

问题反馈

一键分享到这些平台