如何用一个计时器实现商品列表的倒计时
时间: 2024-02-11 08:05:55 浏览: 28
在前端实现商品列表的倒计时,可以使用 JavaScript 和定时器来实现。以下是一个简单的实现示例:
HTML 代码:
```html
<div class="countdown">
<div class="countdown-item">
<span class="countdown-value" data-timestamp="1609459200"></span>
<span class="countdown-label">秒</span>
</div>
<div class="countdown-item">
<span class="countdown-value" data-timestamp="1609462800"></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 countdownElements = document.querySelectorAll('.countdown-value');
// 更新倒计时元素的显示
function updateCountdown() {
countdownElements.forEach(element => {
const timestamp = parseInt(element.dataset.timestamp);
const currentTimestamp = Math.floor(Date.now() / 1000);
const seconds = timestamp - currentTimestamp;
if (seconds <= 0) {
element.textContent = '已结束';
} else {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
element.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
}
});
}
// 每秒钟更新一次倒计时
setInterval(() => {
updateCountdown();
}, 1000);
// 页面加载时更新一次倒计时
updateCountdown();
```
这段代码实现了在页面中显示多个商品的倒计时,每秒钟自动更新一次。可以根据实际需求修改 HTML 结构以适应不同的场景。