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'; }