2.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机分队工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        header {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }
        
        .subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        .content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        @media (max-width: 768px) {
            .content {
                grid-template-columns: 1fr;
            }
        }
        
        .panel {
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .panel-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
        }
        
        .people-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .person-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .person-item:hover {
            background: #e9ecef;
            transform: translateY(-2px);
        }
        
        .person-item.selected {
            background: #d1ecf1;
            border-color: #17a2b8;
        }
        
        .person-item input {
            margin-right: 10px;
            cursor: pointer;
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
            margin-top: 20px;
        }
        
        .control-group {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 150px;
        }
        
        label {
            margin-bottom: 8px;
            font-weight: 600;
            color: #495057;
        }
        
        select, input[type="number"] {
            padding: 12px 15px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        select:focus, input:focus {
            border-color: #3498db;
            outline: none;
        }
        
        .buttons {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        button {
            padding: 14px 28px;
            border: none;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            flex: 1;
        }
        
        #randomizeBtn {
            background: linear-gradient(to right, #3498db, #2ecc71);
            color: white;
        }
        
        #randomizeBtn:hover {
            transform: translateY(-3px);
            box-shadow: 0 7px 14px rgba(52, 152, 219, 0.3);
        }
        
        #resetBtn {
            background: #f8f9fa;
            color: #495057;
            border: 2px solid #ddd;
        }
        
        #resetBtn:hover {
            background: #e9ecef;
        }
        
        .results {
            margin-top: 30px;
        }
        
        .groups-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .group-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-top: 5px solid #3498db;
        }
        
        .group-header {
            font-size: 1.3rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px dashed #eee;
        }
        
        .group-members {
            list-style-type: none;
        }
        
        .group-members li {
            padding: 8px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        
        .group-members li:last-child {
            border-bottom: none;
        }
        
        .empty-message {
            text-align: center;
            color: #7f8c8d;
            font-style: italic;
            padding: 40px 20px;
            background: #f8f9fa;
            border-radius: 10px;
            margin-top: 20px;
        }
        
        .stats {
            display: flex;
            justify-content: space-between;
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            font-weight: 600;
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            color: #7f8c8d;
            font-size: 0.9rem;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>随机分队工具</h1>
            <p class="subtitle">选择参与人员，设置分组数量，一键随机分队</p>
        </header>
        
        <div class="content">
            <div class="panel">
                <h2 class="panel-title">选择参与人员</h2>
                <div class="people-list" id="peopleList">
                    <!-- 人员列表将通过JS动态生成 -->
                </div>
                
                <div class="controls">
                    <div class="control-group">
                        <label for="groupCount">分组数量</label>
                        <select id="groupCount">
                            <option value="2">2组</option>
                            <option value="3">3组</option>
                            <option value="4">4组</option>
                            <option value="5">5组</option>
                            <option value="6">6组</option>
                        </select>
                    </div>
                    
                    <div class="control-group">
                        <label for="selectionMode">选择模式</label>
                        <select id="selectionMode">
                            <option value="all">全选</option>
                            <option value="none">全不选</option>
                            <option value="invert">反选</option>
                        </select>
                    </div>
                </div>
                
                <div class="buttons">
                    <button id="randomizeBtn">开始随机分队</button>
                    <button id="resetBtn">重置选择</button>
                </div>
            </div>
            
            <div class="panel">
                <h2 class="panel-title">分组结果</h2>
                <div class="stats">
                    <div>已选择: <span id="selectedCount" class="highlight">0</span> 人</div>
                    <div>分组数: <span id="groupCountDisplay" class="highlight">2</span> 组</div>
                </div>
                
                <div class="results" id="resultsContainer">
                    <div class="empty-message">
                        请选择参与人员并点击"开始随机分队"按钮
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>随机分队工具 &copy; 2023 | 共 <span id="totalPeople">8</span> 人可选</p>
        </footer>
    </div>

    <script>
        // 初始人员名单
        const people = ['福德', '阳', '虎', '赵宇', '子瑶', '米', '刘蕤宁', '宋海峰'];
        
        // DOM元素
        const peopleListEl = document.getElementById('peopleList');
        const groupCountEl = document.getElementById('groupCount');
        const selectionModeEl = document.getElementById('selectionMode');
        const randomizeBtn = document.getElementById('randomizeBtn');
        const resetBtn = document.getElementById('resetBtn');
        const resultsContainer = document.getElementById('resultsContainer');
        const selectedCountEl = document.getElementById('selectedCount');
        const groupCountDisplayEl = document.getElementById('groupCountDisplay');
        const totalPeopleEl = document.getElementById('totalPeople');
        
        // 初始化人员列表
        function initPeopleList() {
            peopleListEl.innerHTML = '';
            totalPeopleEl.textContent = people.length;
            
            people.forEach((person, index) => {
                const personItem = document.createElement('div');
                personItem.className = 'person-item';
                personItem.innerHTML = `
                    <input type="checkbox" id="person${index}" checked>
                    <label for="person${index}">${person}</label>
                `;
                
                // 添加点击事件切换选中状态
                personItem.addEventListener('click', (e) => {
                    if (e.target.tagName !== 'INPUT') {
                        const checkbox = personItem.querySelector('input');
                        checkbox.checked = !checkbox.checked;
                        updateSelectedCount();
                        togglePersonItemStyle(personItem, checkbox.checked);
                    }
                });
                
                // 监听复选框变化
                const checkbox = personItem.querySelector('input');
                checkbox.addEventListener('change', () => {
                    updateSelectedCount();
                    togglePersonItemStyle(personItem, checkbox.checked);
                });
                
                peopleListEl.appendChild(personItem);
            });
            
            updateSelectedCount();
        }
        
        // 切换人员项的选中样式
        function togglePersonItemStyle(item, isSelected) {
            if (isSelected) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
        }
        
        // 更新已选择人数
        function updateSelectedCount() {
            const checkboxes = document.querySelectorAll('.person-item input:checked');
            selectedCountEl.textContent = checkboxes.length;
            groupCountDisplayEl.textContent = groupCountEl.value;
        }
        
        // 随机选择算法
        function shuffleArray(array) {
            const shuffled = [...array];
            for (let i = shuffled.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
            }
            return shuffled;
        }
        
        // 随机分组函数
        function randomizeGroups() {
            // 获取选中的人员
            const selectedPeople = [];
            document.querySelectorAll('.person-item').forEach((item, index) => {
                const checkbox = item.querySelector('input');
                if (checkbox.checked) {
                    selectedPeople.push(people[index]);
                }
            });
            
            // 检查是否有足够人员
            if (selectedPeople.length === 0) {
                resultsContainer.innerHTML = '<div class="empty-message">请至少选择一名参与人员</div>';
                return;
            }
            
            // 获取分组数量
            const groupCount = parseInt(groupCountEl.value);
            
            // 随机打乱人员顺序
            const shuffledPeople = shuffleArray(selectedPeople);
            
            // 创建分组
            const groups = Array.from({ length: groupCount }, () => []);
            
            // 分配人员到各组
            shuffledPeople.forEach((person, index) => {
                groups[index % groupCount].push(person);
            });
            
            // 显示分组结果
            displayGroups(groups);
        }
        
        // 显示分组结果
        function displayGroups(groups) {
            let html = '<div class="groups-container">';
            
            groups.forEach((group, index) => {
                html += `
                <div class="group-card">
                    <div class="group-header">第 ${index + 1} 组 (${group.length}人)</div>
                    <ul class="group-members">
                        ${group.map(person => `<li>${person}</li>`).join('')}
                    </ul>
                </div>
                `;
            });
            
            html += '</div>';
            resultsContainer.innerHTML = html;
        }
        
        // 处理选择模式变化
        function handleSelectionModeChange() {
            const mode = selectionModeEl.value;
            const checkboxes = document.querySelectorAll('.person-item input');
            
            switch(mode) {
                case 'all':
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = true;
                        togglePersonItemStyle(checkbox.closest('.person-item'), true);
                    });
                    break;
                case 'none':
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = false;
                        togglePersonItemStyle(checkbox.closest('.person-item'), false);
                    });
                    break;
                case 'invert':
                    checkboxes.forEach(checkbox => {
                        checkbox.checked = !checkbox.checked;
                        togglePersonItemStyle(checkbox.closest('.person-item'), checkbox.checked);
                    });
                    break;
            }
            
            updateSelectedCount();
        }
        
        // 重置选择
        function resetSelection() {
            document.querySelectorAll('.person-item input').forEach(checkbox => {
                checkbox.checked = true;
                togglePersonItemStyle(checkbox.closest('.person-item'), true);
            });
            groupCountEl.value = "2";
            selectionModeEl.value = "all";
            updateSelectedCount();
            resultsContainer.innerHTML = '<div class="empty-message">请选择参与人员并点击"开始随机分队"按钮</div>';
        }
        
        // 事件监听
        groupCountEl.addEventListener('change', updateSelectedCount);
        selectionModeEl.addEventListener('change', handleSelectionModeChange);
        randomizeBtn.addEventListener('click', randomizeGroups);
        resetBtn.addEventListener('click', resetSelection);
        
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initPeopleList();
            updateSelectedCount();
        });
    </script>
</body>
</html>