let itemCounter = 10;
// 滚动进度条
const progressBar = document.getElementById('progressBar');
const scrollContainer = document.getElementById('scrollContainer');
scrollContainer.addEventListener('scroll', function() {
const scrollTop = scrollContainer.scrollTop;
const scrollHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight;
const scrollPercentage = (scrollTop / scrollHeight)*100;
progressBar.style.width = scrollPercentage + '%';
});
// 添加新项目
document.getElementById('btnAdd').addEventListener('click', function() {
itemCounter++;
const contentArea = document.getElementById('contentArea');
const newItem = document.createElement('div');
newItem.className = `scroll-item ${itemCounter % 2 === 0 ? 'bg-blue-100' : 'bg-purple-100'} p-4 rounded-lg shadow-sm border-l-4 border-blue-500 fade-in`;
newItem.innerHTML = `
${new Date().toLocaleString()}
`;
contentArea.appendChild(newItem);
document.getElementById('itemCount').textContent = itemCounter;
attachDeleteListener(newItem);
});
// 清空列表
document.getElementById('btnClear').addEventListener('click', function() {
if(confirm('确定要清空所有项目吗?')) {
document.getElementById('contentArea').innerHTML = '';
itemCounter = 0;
document.getElementById('itemCount').textContent = itemCounter;
}
});
// 回到顶部
document.getElementById('btnTop').addEventListener('click', function() {
scrollContainer.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 加载更多
document.getElementById('btnLoad').addEventListener('click', function() {
const btn = this;
const originalText = btn.innerHTML;
btn.innerHTML = '加载中...';
btn.disabled = true;
// 模拟AJAX加载
setTimeout(function() {
for(let i = 1; i <= 5; i++) {
itemCounter++;
const contentArea = document.getElementById('contentArea');
const newItem = document.createElement('div');
newItem.className = `scroll-item ${itemCounter % 2 === 0 ? 'bg-blue-100' : 'bg-purple-100'} p-4 rounded-lg shadow-sm border-l-4 border-green-500 fade-in`;
newItem.innerHTML = `
${new Date().toLocaleString()}
`;
contentArea.appendChild(newItem);
attachDeleteListener(newItem);
}
document.getElementById('itemCount').textContent = itemCounter;
btn.innerHTML = originalText;
btn.disabled = false;
}, 1000);
});
// 绑定删除事件
function attachDeleteListener(element) {
const deleteBtn = element.querySelector('.delete-btn');
deleteBtn.addEventListener('click', function() {
element.remove();
itemCounter--;
document.getElementById('itemCount').textContent = itemCounter;
});
}
// 初始绑定删除事件
document.querySelectorAll('.delete-btn').forEach(btn => {
btn.addEventListener('click', function() {
this.closest('.scroll-item').remove();
itemCounter--;
document.getElementById('itemCount').textContent = itemCounter;
});
});
// 键盘快捷键支持
document.addEventListener('keydown', function(e) {
if(e.ctrlKey) {
switch(e.key) {
case 'ArrowUp':
e.preventDefault();
scrollContainer.scrollBy({ top: -50, behavior: 'smooth' });
break;
case 'ArrowDown':
e.preventDefault();
scrollContainer.scrollBy({ top: 50, behavior: 'smooth' });
break;
case 'Home':
e.preventDefault();
scrollContainer.scrollTo({ top: 0, behavior: 'smooth' });
break;
case 'End':
e.preventDefault();
scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior: 'smooth' });
break;
}
}
});