| 123456789101112131415161718192021222324252627282930313233 |
- document.addEventListener('DOMContentLoaded', () => {
- const METADATA_KEY = '__storage_metadata__';
- const containers = document.querySelectorAll('.image-card');
- // 获取本地存储数据
- const metaData = JSON.parse(localStorage.getItem(METADATA_KEY)) || {};
- containers.forEach(container => {
- const contentId = container.dataset.contentId;
- if (metaData[contentId]) {
- const progress = Math.round(metaData[contentId].progress);
- // 如何已完成,展示work图
- if (progress >= 100) {
- const img = container.querySelector('img'); // 获取当前div内的img元素
- img.src = img.src.replace('/page/', '/work/');
- }
- // 添加角标
- const badge = document.createElement('div');
- badge.className = 'progress-badge';
- badge.innerHTML = `<span>${progress >= 100 ? '✓' : progress + '%'}</span>`;
- badge.style.backgroundColor = progress >= 100 ? '#4CAF50' : '#FF5252';
- // 添加渐变动画
- badge.style.transition = 'background-color 0.3s ease';
- container.appendChild(badge);
- }
- });
- });
|