MonkeyBlog

生命的意義在於編程

0%

JavaScript Tag

2020
2019
filterContainer.innerHTML = ` 筛选类别： `; // 创建时间线HTML let timelineHTML = '
'; timelineData.forEach((item, index) => { const date = new Date(item.date); const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`; timelineHTML += `
${formattedDate}

${item.title}

${item.category}

${item.content}

`; }); timelineHTML += '
'; timelineContainer.innerHTML = timelineHTML; // 将时间线插入到页面中 const scheduleContent = document.querySelector('.page-type-schedule .post-block'); if (scheduleContent) { // 创建时间线标题 const timelineTitle = document.createElement('h2'); timelineTitle.textContent = '📅 时间线'; timelineTitle.style.marginTop = '50px'; // 插入时间线到页面中 scheduleContent.appendChild(timelineTitle); scheduleContent.appendChild(filterContainer); scheduleContent.appendChild(timelineContainer); // 添加过滤功能 const filterButtons = document.querySelectorAll('.filter-btn'); const timelineItems = document.querySelectorAll('.timeline-item'); filterButtons.forEach(btn => { btn.addEventListener('click', function() { // 更新活动按钮状态 filterButtons.forEach(b => b.classList.remove('active')); this.classList.add('active'); const filter = this.getAttribute('data-filter'); timelineItems.forEach(item => { if (filter === 'all' || item.getAttribute('data-category') === filter) { item.style.display = 'block'; setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, 100); } else { item.style.opacity = '0'; item.style.transform = 'translateY(20px)'; setTimeout(() => { item.style.display = 'none'; }, 300); } }); }); }); // 添加滚动动画 const animateOnScroll = () => { const items = document.querySelectorAll('.timeline-item'); items.forEach(item => { const itemTop = item.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (itemTop < windowHeight - 100) { item.classList.add('show'); } }); }; // 初始化时执行一次 setTimeout(animateOnScroll, 500); // 监听滚动事件 window.addEventListener('scroll', animateOnScroll); } } });