前端多个商品列表倒计时
时间: 2023-07-01 17:12:43 浏览: 73
在前端实现多个商品列表的倒计时,可以使用 JavaScript 和定时器来实现。以下是一个简单的实现示例:
HTML 代码:
```html
<div class="countdown">
<div class="countdown-item">
<span class="countdown-value" id="countdown-1"></span>
<span class="countdown-label">秒</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="countdown-2"></span>
<span class="countdown-label">秒</span>
</div>
<!-- 添加更多商品倒计时 -->
</div>
```
CSS 代码:
```css
.countdown {
display: flex;
justify-content: center;
}
.countdown-item {
margin: 0 10px;
}
.countdown-value {
font-size: 24px;
font-weight: bold;
}
.countdown-label {
font-size: 16px;
margin-left: 5px;
}
```
JavaScript 代码:
```js
// 假设商品倒计时的时间戳已经存储在一个数组中,每个时间戳对应一个商品
const countdownTimestamps = [1609459200, 1609462800];
// 获取当前时间戳
const currentTimestamp = Math.floor(Date.now() / 1000);
// 计算每个商品的倒计时秒数
const countdownSeconds = countdownTimestamps.map(timestamp => timestamp - currentTimestamp);
// 获取倒计时元素
const countdownElements = document.querySelectorAll('.countdown-value');
// 更新倒计时元素的显示
function updateCountdown() {
countdownSeconds.forEach((seconds, index) => {
if (seconds <= 0) {
countdownElements[index].textContent = '已结束';
} else {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
countdownElements[index].textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
});
}
// 每秒更新一次倒计时
setInterval(() => {
countdownSeconds.forEach((seconds, index) => {
if (seconds > 0) {
countdownSeconds[index] = seconds - 1;
}
});
updateCountdown();
}, 1000);
// 页面加载时更新一次倒计时
updateCountdown();
```
这段代码实现了在页面中显示多个商品的倒计时,每秒钟自动更新一次。可以根据实际需求修改时间戳数组和 HTML 结构以适应不同的场景。