让博客在关键日子弹窗-变灰-放烟花

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

前置教程

参见^[1:1]。

{% note warning flat%}SweetAlert库应该在day.js和lunar.js前面引入!{% endnote %}

放烟花实现

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

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

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");
    }
}

效果大概如下：

参考资料

---

1. 让你的网站在一些日子中自动弹窗/灰屏 | Ariasakaの小窝 (yisous.xyz) ↩︎ ↩︎

2. SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes ↩︎