写个简单的html5用餐座次图生成器

csx · 发表于 2024-6-30 14:28

写个简单的html5用餐座次图生成器

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用餐座次图</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        #input-form {
            margin-bottom: 20px;
            text-align: center;
        }
        #form-elements {
            display: flex;
            align-items: center;
            gap: 10px; /* 增加间距 */
        }
        #form-elements input,
        #form-elements button {
            padding: 4px;
            font-weight: bold;
            border: 1px solid #88c416;
            color: #88c416;
        }
        #form-elements input {
            height: 20px; /* 统一高度 */
                        color: #88c416;
        }
        #form-elements button {
            cursor: pointer;
            height: 30px; /* 统一高度 */
        }
        #seating {
            position: relative;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background-color: #3399FF;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            font-weight: bold;
        }
        .seat {
            position: absolute;
            width: 60px;
            height: 30px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #88c416;
            border-radius: 10px;
            cursor: pointer;
        }
        .seat input {
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
        }
        [url=home.php?mod=space&uid=945662]@media[/url] print {
            #input-form, button , label {
                display: none;
            }
        }
    </style>
</head>
<body>
    <form id="input-form">
        <label for="table-info" style="color:#66CC00; height:25px; line-height:25px; font-weight:bold; padding:10px;">用餐座次图生成 (可拖动人员互换位置)</label><br><br>
        <div id="form-elements">
            <input type="text" id="table-info" required placeholder="桌号信息">
            <input type="text" id="names" required placeholder="张三、李四、王二">
            <button type="submit">生成座次</button>
        </div>
    </form>
    <div id="seating">
        <div id="table-info-display"></div>
    </div>
    <br><label style="color:#CCCCCC; height:25px; line-height:25px; padding:10px; font-size:10px;">&#169; RainMan</label>
    <script>
        document.getElementById('input-form').addEventListener('submit', function(event) {
            event.preventDefault();
            const tableInfo = document.getElementById('table-info').value;
            const names = document.getElementById('names').value.split(/[,，、]/).map(name => name.trim());
            document.getElementById('table-info-display').textContent = `${tableInfo} (${names.length}人)`;
            generateSeating(names);
        });
 
        function generateSeating(names) {
            const seating = document.getElementById('seating');
            const existingSeats = seating.querySelectorAll('.seat');
            existingSeats.forEach(seat => seat.remove());
 
            const numPeople = names.length;
            const angleStep = (2 * Math.PI) / numPeople;
            for (let i = 0; i < numPeople; i++) {
                const angle = i * angleStep - (Math.PI / 2);
                const x = 250 + 200 * Math.cos(angle);
                const y = 250 + 200 * Math.sin(angle);
                const seat = document.createElement('div');
                seat.classList.add('seat');
                seat.style.left = `${x - 30}px`;
                seat.style.top = `${y - 15}px`;
                seat.setAttribute('draggable', 'true');
                seat.addEventListener('dragstart', dragStart);
                seat.addEventListener('dragover', dragOver);
                seat.addEventListener('drop', drop);
                seat.addEventListener('dragend', dragEnd);
 
                const input = document.createElement('input');
                input.type = 'text';
                input.value = names[i];
                input.addEventListener('input', updateNamesList);
                seat.appendChild(input);
 
                seating.appendChild(seat);
            }
        }
 
        function updateNamesList() {
            const seats = document.querySelectorAll('.seat input');
            const names = Array.from(seats).map(input => input.value.trim()).filter(name => name !== '');
            document.getElementById('names').value = names.join('、');
            const tableInfo = document.getElementById('table-info').value;
            document.getElementById('table-info-display').textContent = `${tableInfo} (${names.length}人)`;
        }
 
        let draggedInput;
 
        function dragStart(event) {
            draggedInput = event.target.querySelector('input');
            event.dataTransfer.effectAllowed = 'move';
        }
 
        function dragOver(event) {
            event.preventDefault();
        }
 
        function drop(event) {
            event.preventDefault();
            const targetInput = event.target.closest('.seat').querySelector('input');
            if (targetInput && targetInput !== draggedInput) {
                const tempValue = draggedInput.value;
                draggedInput.value = targetInput.value;
                targetInput.value = tempValue;
                updateNamesList();
            }
        }
 
        function dragEnd() {
            draggedInput = null;
        }
    </script>
</body>
</html>

账号		自动登录	找回密码
密码			立即注册

写个简单的html5用餐座次图生成器

论坛元老

灌水之王