前端页面动态展示倒计时代码示例
时间: 2023-09-15 09:15:24 浏览: 40
好的,这个问题属于技术类问题,我可以帮您解答。以下是一个前端页面动态展示倒计时的代码示例:
HTML 代码:
```html
<div id="countdown"></div>
```
JavaScript 代码:
```javascript
var countdownElement = document.getElementById("countdown");
var countDownDate = new Date("Oct 31, 2021 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
countdownElement.innerHTML = "EXPIRED";
}
}, 1000);
```
在这个示例中,我们用 JavaScript 计算并更新了距离指定日期的倒计时,然后将其展示在 HTML 页面上。您可以根据自己的需求修改日期,以及对样式进行进一步的定制。希望这能够帮到您!