在线倒计时的jQuery DOM操作代码怎么写
时间: 2024-02-29 10:52:39 浏览: 25
可以使用以下代码实现一个简单的在线倒计时:
HTML代码:
```html
<div id="countdown"></div>
```
jQuery代码:
```javascript
$(document).ready(function() {
var countDownDate = new Date("Oct 1, 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); // 计算剩余秒数
$("#countdown").html(days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒"); // 更新倒计时显示
if (distance < 0) {
clearInterval(x); // 倒计时结束
$("#countdown").html("倒计时已结束!"); // 更新倒计时显示
}
}, 1000); // 每秒更新一次倒计时
});
```
其中,`countDownDate` 可以设置为你想要的倒计时结束日期,`setInterval` 方法每秒钟更新一次倒计时,如果距离倒计时结束时间小于 0,则清除计时器,倒计时结束。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)