利用JS制作一个倒时器
时间: 2023-07-04 08:14:21 浏览: 54
好的,下面是利用JS制作一个简单的倒时器:
HTML部分:
```html
<p id="demo"></p>
```
JS部分:
```javascript
// 设置倒计时时间(单位:秒)
var countDownDate = new Date().getTime() + 5 * 60 * 1000;
// 更新倒计时的函数
var x = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算倒计时时间
var distance = countDownDate - now;
// 计算剩余的分钟和秒数
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 输出倒计时信息
document.getElementById("demo").innerHTML = "剩余时间:" + minutes + "分 " + seconds + "秒 ";
// 如果倒计时结束,清除定时器
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "倒计时已结束";
}
}, 1000);
```
上面的代码中,我们设置了一个倒计时时间 `countDownDate`,然后每隔1秒钟更新一次倒计时的信息,直到倒计时结束。在每次更新倒计时信息时,我们都计算出距离倒计时结束还有多少时间,然后将剩余的分钟数和秒数输出到 HTML 页面上。
这就是一个简单的倒时器的实现方法。
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.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)