用javascript语言写出来一个倒计时
时间: 2023-03-21 11:00:53 浏览: 107
好的,以下是一个使用 JavaScript 编写的简单倒计时程序:
HTML 代码:
```html
<p>距离2023年元旦还有:</p>
<span id="countdown"></span>
```
JavaScript 代码:
```javascript
// 获取倒计时元素
var countdownEl = document.getElementById("countdown");
// 设置倒计时目标日期,这里以 2023 年元旦为例
var targetDate = new Date("January 1, 2023 00:00:00").getTime();
// 每秒更新倒计时
var countdownInterval = setInterval(function() {
// 获取当前时间
var now = new Date().getTime();
// 计算距离目标日期的毫秒数
var distance = targetDate - now;
// 计算时、分、秒
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);
// 将时、分、秒格式化为两位数
hours = ("0" + hours).slice(-2);
minutes = ("0" + minutes).slice(-2);
seconds = ("0" + seconds).slice(-2);
// 更新倒计时元素的内容
countdownEl.innerHTML = hours + ":" + minutes + ":" + seconds;
// 如果时间已经过期,则清除计时器
if (distance < 0) {
clearInterval(countdownInterval);
countdownEl.innerHTML = "倒计时已结束";
}
}, 1000);
```
这段代码将在页面中创建一个倒计时元素,它会显示距离 2023 年元旦还有多长时间。程序将每秒钟更新一次倒计时,直到倒计时结束。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)