Compare commits

..

No commits in common. "9d1ef8adc4bdd9696644d89da89e4cb8262e7487" and "758636f091c378de9e08a827fc8e927947b6fd25" have entirely different histories.

11 changed files with 1 additions and 131 deletions

View File

@ -92,50 +92,4 @@ 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);
}

View File

@ -16,11 +16,6 @@
<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>

View File

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

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.