帮我写一个跨年html代码,在达到预定时间时放烟花
时间: 2023-02-08 08:50:32 浏览: 94
以下是一个跨年倒计时页面,在达到预定时间时放烟花的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>New Year Countdown</title>
<script type="text/javascript">
// 设置预定时间
var countDownDate = new Date("Jan 1, 2022 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);
// 显示倒计时
document.getElementById("countdown").innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分 " + seconds + "秒 ";
// 到达预定时间
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "放烟花啦!";
// 放烟花效果
var fireworks = document.createElement("img");
fireworks.src = "fireworks.gif";
document.body.appendChild(fireworks);
}
}, 1000);
</script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>
```
请注意,上述代码中的"fireworks.gif"是烟花效果图片的文件名,您需要将其替换为您自己的烟花图片。此外,您可能需要更改预定时间以适应您的需求。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)