progress.js 1.1 KB

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