您现在的位置是：首页 > 前端 > 后端 > WEB基础 WEB基础

jquery 写一个倒计时，分钟：秒：毫秒，给定的参数是600秒

2023-05-23【WEB基础】756人已围观

简介您好！您想要使用 jQuery 编写一个倒计时，显示分钟、秒和毫秒，给定的参数是 600 秒。以下是一个简单的实现方法：首先，我们需要在 HTML 文件中创建一个显示倒计时的元素： ```html 倒计时 00:00:000 ``` 接下来，我们在 countdown.js 文件中编写倒计时的逻辑： ```javascript $(document).ready(function

您好！您想要使用 jQuery 编写一个倒计时，显示分钟、秒和毫秒，给定的参数是 600 秒。以下是一个简单的实现方法：

首先，我们需要在 HTML 文件中创建一个显示倒计时的元素：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="countdown">00:00:000</div>
    <script src="countdown.js"></script>
</body>
</html>
```

接下来，我们在 countdown.js 文件中编写倒计时的逻辑：

```javascript
$(document).ready(function () {
    var totalTime = 600 * 1000; // 将秒转换为毫秒
    var endTime = new Date().getTime() + totalTime;

var countdown = setInterval(function () {
        var now = new Date().getTime();
        var remainingTime = endTime - now;

if (remainingTime <= 0) {
            clearInterval(countdown);
            remainingTime = 0;
        }

var minutes = Math.floor(remainingTime / (1000 * 60));
        var seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
        var milliseconds = remainingTime % 1000;

var formattedTime = pad(minutes, 2) + ':' + pad(seconds, 2) + ':' + pad(milliseconds, 3);
        $('#countdown').text(formattedTime);
    }, 10);

function pad(num, size) {
        var s = "000" + num;
        return s.substr(s.length - size);
    }
});
```

关注博客，更多精彩分享，敬请期待！

Tags： javascritp

很赞哦！ (0)

上一篇：thinkphp分页查询，点击分页查询条件调入下一页

下一篇：bat锁屏和熄屏 windows