Widget:ViewportProgress

// 获取所有具有类名为"viewport"的元素 const viewports = document.getElementsByClassName('viewport');

// 遍历每个viewport元素 for (let i = 0; i < viewports.length; i++) { // 为每个viewport元素添加data-id属性，并设置其值为索引值 viewports[i].setAttribute('data-id', i);

// 获取特定viewport的元素 const itemTime = viewports[i].querySelector('.item_time'); const itemTimeStart = viewports[i].querySelector('.item_timestart'); const itemTimeEnd = viewports[i].querySelector('.item_timeend'); const progressBar = viewports[i].querySelector('.progress-bar');

// 将时间字符串转换为Date对象 function parseDate(timeStr) { const [date, time] = timeStr.split(' '); const [year, month, day] = date.split('/'); const [hours, minutes, seconds] = time.split(':'); return new Date(year, month - 1, day, hours, minutes, seconds); }

// 计算两个日期之间的时间差（以秒为单位） function getDifferenceInSeconds(date1, date2) { const diff = date1 - date2; return Math.floor(diff / 1000); }

// 将秒数转换为天、小时、分钟和秒的格式 function formatSeconds(seconds) { const days = Math.floor(seconds / (24 * 60 * 60)); seconds %= 24 * 60 * 60; const hours = Math.floor(seconds / (60 * 60)); seconds %= 60 * 60; const minutes = Math.floor(seconds / 60); seconds %= 60; return { days, hours, minutes, seconds }; }

// 获取开始和结束时间，并计算总时间（以秒为单位） const startTime = parseDate(itemTimeStart.textContent); const endTime = parseDate(itemTimeEnd.textContent); const totalSeconds = getDifferenceInSeconds(endTime, startTime);

// 更新进度条和剩余时间的函数 function updateProgressBarAndTime() { const now = new Date(); const remainingSeconds = getDifferenceInSeconds(endTime, now); const timeDiff = formatSeconds(remainingSeconds); const isPast = remainingSeconds <= 0; progressBar.style.width = isPast ? '100%' : `${Math.abs(100-(remainingSeconds / totalSeconds) * 100)}%`; itemTime.textContent = isPast ? `已过去：${Math.abs(timeDiff.days)-1}天${Math.abs(timeDiff.hours)-1}小时${Math.abs(timeDiff.minutes)-1}分${Math.abs(timeDiff.seconds)}秒` : `剩余时间：${timeDiff.days}天${timeDiff.hours}小时${timeDiff.minutes}分${timeDiff.seconds}秒`; }

// 每秒更新一次进度条和剩余时间 setInterval(() => updateProgressBarAndTime(i), 1000); }

}]); </script>