实验报告

Web/翻页/css/main.css

@@ -92,4 +92,50 @@ body {
     margin-bottom: 30px;
     color: #333;
     font-size: 24px;
+}
+
+#toggleNav {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 25px;
+    background-color: #2196F3;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    z-index: 1000;
+}
+
+#toggleNav:hover {
+    background-color: #1976D2;
+    transform: translateY(-2px);
+}
+
+.number-navigation {
+    position: fixed;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 15px 25px;
+    border-radius: 50px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.page-button {
+    padding: 8px 15px;
+    margin: 0 5px;
+    border: none;
+    border-radius: 25px;
+    background-color: #4CAF50;
+    color: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.page-button.active {
+    background-color: #45a049;
+    transform: scale(1.1);
 }

Web/翻页/index.html

@@ -16,6 +16,11 @@
         <span id="pageIndicator"></span>
         <button onclick="nextPage()">下一页</button>
     </div>
-    
+
+    <div class="number-navigation" style="display: none;">
+        <div id="pageButtons"></div>
+    </div>
+
+    <button id="toggleNav" onclick="toggleNavigation()">切换导航样式</button>
 </body>
 </html>

Web/翻页/js/main.js

@@ -1,6 +1,7 @@
         let currentPage = 1;
         let totalPages = 0;
         let itemsPerPage = 0;
+        let isNumberNavigation = false;
 
         window.onload = function() {
             totalPages = parseInt(prompt("请输入要创建的页面数量：", "3"));
@@ -9,6 +10,8 @@
             generatePages();
             showPage(1);
             updatePageIndicator();
+            generatePageButtons();
+            updateNavigationVisibility();
         }
 
         function generatePages() {
@@ -46,6 +49,9 @@
             });
             
             document.getElementById(`page${pageNum}`).classList.add('active');
+            currentPage = pageNum;
+            updatePageIndicator();
+            updateNavigationVisibility();
         }
 
         function nextPage() {
@@ -67,4 +73,77 @@
         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';
         }