HBNU-School/Web/翻页/js/main.js

        let currentPage = 1;
        let totalPages = 0;
        let itemsPerPage = 0;
        let isNumberNavigation = false;

        window.onload = function() {
            totalPages = parseInt(prompt("请输入要创建的页面数量：", "3"));
            itemsPerPage = parseInt(prompt("请输入每页的栏目数：", "4"));
            
            generatePages();
            showPage(1);
            updatePageIndicator();
            generatePageButtons();
            updateNavigationVisibility();
        }

        function generatePages() {
            const container = document.getElementById('pagesContainer');
            
            for(let i = 0; i < totalPages; i++) {
                const page = document.createElement('div');
                page.className = 'page';
                page.id = `page${i+1}`;
                
                // 添加页面标题
                const title = document.createElement('h2');
                title.className = 'page-title';
                title.innerHTML = `第 ${i+1} 页`;
                page.appendChild(title);
                
                const contentContainer = document.createElement('div');
                contentContainer.className = 'content-container';
                
                for(let j = 0; j < itemsPerPage; j++) {
                    const item = document.createElement('div');
                    item.className = 'content-item';
                    item.innerHTML = `内容 ${j+1}`;
                    contentContainer.appendChild(item);
                }
                
                page.appendChild(contentContainer);
                container.appendChild(page);
            }
        }

        function showPage(pageNum) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            document.getElementById(`page${pageNum}`).classList.add('active');
            currentPage = pageNum;
            updatePageIndicator();
            updateNavigationVisibility();
        }

        function nextPage() {
            if(currentPage < totalPages) {
                currentPage++;
                showPage(currentPage);
                updatePageIndicator();
            }
        }

        function prevPage() {
            if(currentPage > 1) {
                currentPage--;
                showPage(currentPage);
                updatePageIndicator();
            }
        }

        function updatePageIndicator() {
            document.getElementById('pageIndicator').textContent = 
                `${currentPage} / ${totalPages}`;
        }

        function generatePageButtons() {
            const buttonContainer = document.getElementById('pageButtons');
            buttonContainer.innerHTML = '';
            
            // 添加上一页按钮
            const prevButton = document.createElement('button');
            prevButton.className = 'page-button prev-button';
            prevButton.textContent = '上一页';
            prevButton.onclick = prevPage;
            buttonContainer.appendChild(prevButton);
            
            // 添加数字按钮
            for(let i = 1; i <= totalPages; i++) {
                const button = document.createElement('button');
                button.className = 'page-button';
                button.textContent = i;
                button.onclick = () => {
                    currentPage = i;
                    showPage(i);
                    updatePageButtons();
                    updatePageIndicator();
                };
                buttonContainer.appendChild(button);
            }
            
            // 添加下一页按钮
            const nextButton = document.createElement('button');
            nextButton.className = 'page-button next-button';
            nextButton.textContent = '下一页';
            nextButton.onclick = nextPage;
            buttonContainer.appendChild(nextButton);
            
            updatePageButtons();
        }

        function updatePageButtons() {
            // 选择除了"上一页"和"下一页"按钮之外的数字按钮
            const numberButtons = Array.from(document.querySelectorAll('.page-button')).filter(button => 
                !button.classList.contains('prev-button') && 
                !button.classList.contains('next-button')
            );
            
            numberButtons.forEach(button => {
                // 将按钮的文本内容转换为数字并与当前页码比较
                button.classList.toggle('active', parseInt(button.textContent) === currentPage);
            });
        }

        function toggleNavigation() {
            isNumberNavigation = !isNumberNavigation;
            document.querySelector('.navigation').style.display = 
                isNumberNavigation ? 'none' : 'block';
            document.querySelector('.number-navigation').style.display = 
                isNumberNavigation ? 'block' : 'none';
            
            if (isNumberNavigation) {
                generatePageButtons();
            }
            updateNavigationVisibility();
        }

        function updateNavigationVisibility() {
            const prevButton = !isNumberNavigation 
                ? document.querySelector('.navigation button:first-child')
                : document.querySelector('.number-navigation .prev-button');
            const nextButton = !isNumberNavigation 
                ? document.querySelector('.navigation button:last-child')
                : document.querySelector('.number-navigation .next-button');
            
            prevButton.style.display = currentPage === 1 ? 'none' : 'inline-block';
            nextButton.style.display = currentPage === totalPages ? 'none' : 'inline-block';
        }