From 7de4f5517d82ad736f939f98ca2665513da52330 Mon Sep 17 00:00:00 2001
From: GuanM <30427262+sxhoio@users.noreply.github.com>
Date: Tue, 12 Nov 2024 09:46:00 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BF=BB=E9=A1=B5=E6=95=88=E6=9E=9C=E5=AE=9E?=
=?UTF-8?q?=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
Web/翻页/css/main.css | 95 +++++++++++++++++++++++++++++++++++++++++++
Web/翻页/index.html | 21 ++++++++++
Web/翻页/js/main.js | 70 +++++++++++++++++++++++++++++++
3 files changed, 186 insertions(+)
create mode 100644 Web/翻页/css/main.css
create mode 100644 Web/翻页/index.html
create mode 100644 Web/翻页/js/main.js
diff --git a/Web/翻页/css/main.css b/Web/翻页/css/main.css
new file mode 100644
index 0000000..8784690
--- /dev/null
+++ b/Web/翻页/css/main.css
@@ -0,0 +1,95 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Microsoft YaHei', sans-serif;
+ background-color: #f5f5f5;
+}
+
+.page {
+ width: 100%;
+ min-height: 100vh;
+ display: none;
+ padding: 40px;
+ background-color: #fff;
+ transition: all 0.3s ease;
+}
+
+.page.active {
+ display: block;
+ animation: fadeIn 0.5s ease;
+}
+
+.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);
+}
+
+.navigation button {
+ padding: 8px 20px;
+ margin: 0 10px;
+ border: none;
+ border-radius: 25px;
+ background-color: #4CAF50;
+ color: white;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.navigation button:hover {
+ background-color: #45a049;
+ transform: translateY(-2px);
+}
+
+#pageIndicator {
+ margin: 0 15px;
+ font-size: 16px;
+ color: #333;
+}
+
+.content-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.content-item {
+ width: 280px;
+ height: 200px;
+ background-color: #ffffff;
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ font-size: 18px;
+ color: #333;
+}
+
+.content-item:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* 添加页面标题 */
+.page-title {
+ text-align: center;
+ margin-bottom: 30px;
+ color: #333;
+ font-size: 24px;
+}
\ No newline at end of file
diff --git a/Web/翻页/index.html b/Web/翻页/index.html
new file mode 100644
index 0000000..3b777b5
--- /dev/null
+++ b/Web/翻页/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+
+ 翻页效果
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Web/翻页/js/main.js b/Web/翻页/js/main.js
new file mode 100644
index 0000000..4013400
--- /dev/null
+++ b/Web/翻页/js/main.js
@@ -0,0 +1,70 @@
+ let currentPage = 1;
+ let totalPages = 0;
+ let itemsPerPage = 0;
+
+ window.onload = function() {
+ totalPages = parseInt(prompt("请输入要创建的页面数量：", "3"));
+ itemsPerPage = parseInt(prompt("请输入每页的栏目数：", "4"));
+
+ generatePages();
+ showPage(1);
+ updatePageIndicator();
+ }
+
+ 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');
+ }
+
+ 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}`;
+ }
\ No newline at end of file