本文大体上参考自[^1],新增了放烟花功能。

前置教程

参见[^1]。

SweetAlert库应该在day.jslunar.js前面引入!

放烟花实现

SweetAlert2库[^2],支持弹窗含有图片,也就是可以弹窗一个放烟花的gif,当然你也可以使用htmlvisible属性来可视化一个放烟花的html页面,但此处我选择偷懒2333

修改day.js中你想放烟花的节日,此处以国庆节为例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
if(m==10&&dd<=5){//国庆节
console.log("祖国"+(y-1949).toString()+"岁生日快乐!");
if(sessionStorage.getItem("isPopupWindow")!="1"){
- Swal.fire("祖国"+(y-1949).toString()+"岁生日快乐!");
+ Swal.fire({
+ title: "祝祖国母亲" + y.toString() + "年生日快乐!🎉🎉🎉",
+ imageUrl: "https://lizilong.oss-cn-hangzhou.aliyuncs.com/typora/firework.gif",
+ imageWidth: "100%",
+ imageHeight: "100%",
+ heightAuto: false,
+ showConfirmButton: false,
+ timer: 9000,
+ });
sessionStorage.setItem("isPopupWindow","1");
}
}

效果大概如下:

image-20230401181200335

参考资料

[^1]: 让你的网站在一些日子中自动弹窗/灰屏 | Ariasakaの小窝 (yisous.xyz)
[^2]: SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes