用javascript做一个倒计时效果距离5.1大促还有**天**时**分**秒的代码
时间: 2023-09-04 11:06:48 浏览: 52
好的,以下是用 JavaScript 实现一个倒计时效果距离 5.1 大促还有多少天、小时、分钟、秒的代码:
```
// 假设 5.1 大促的日期为 2021 年 5 月 1 日
const targetDate = new Date('2021-05-01T00:00:00Z').getTime();
function countDown() {
const now = new Date().getTime();
const remaining = targetDate - now;
// 计算剩余的天、小时、分钟、秒数
const days = Math.floor(remaining / (1000 * 60 * 60 * 24));
const hours = Math.floor((remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remaining % (1000 * 60)) / 1000);
// 将计算结果字符串化,用于展示
const daysStr = days.toString().padStart(2, '0');
const hoursStr = hours.toString().padStart(2, '0');
const minutesStr = minutes.toString().padStart(2, '0');
const secondsStr = seconds.toString().padStart(2, '0');
// 在 HTML 中展示倒计时效果
document.getElementById('days').textContent = daysStr;
document.getElementById('hours').textContent = hoursStr;
document.getElementById('minutes').textContent = minutesStr;
document.getElementById('seconds').textContent = secondsStr;
}
// 每秒钟更新一次倒计时
setInterval(countDown, 1000);
```
以上代码假设页面中有 ID 分别为 `days`、`hours`、`minutes`、`seconds` 的元素用于展示倒计时。运行后会每秒钟更新一次倒计时的展示效果,直到 5.1 大促日期到来时,倒计时效果结束。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)