diff --git a/script.js b/script.js index 1645661..ce17186 100644 --- a/script.js +++ b/script.js @@ -162,6 +162,10 @@ function triggerFireworks() { } } +// 倒计时逻辑,假设倒计时结束后触发烟花 +const countdownElement = document.getElementById('countdown'); +const targetDate = new Date('Feb 9, 2024 23:59:59').getTime(); + // 倒计时更新函数,用于显示距离目标日期的时间并在到达时触发烟花 function updateCountdown() { const now = new Date().getTime(); // 获取当前时间 diff --git a/styles.css b/styles.css index 11db67c..882aa3b 100644 --- a/styles.css +++ b/styles.css @@ -1,10 +1,24 @@ +body, html { + width: 100%; + height: 100%; + margin: 0; + overflow: hidden; + min-height: 100%; /* 确保至少有100%的高度 */ +} + body { font-family: 'Arial', sans-serif; - background-image: url('assets/a.png'); + background-image: url('../new-year-countdown/assets/a.png'); background-size: cover; + background-position: center; /* 确保背景图片居中显示 */ color: #f5f5f5; } +#countdown, #greetings, #previewButton { + position: relative; + z-index: 2; /* 确保这些元素在canvas之上 */ +} + #countdown { font-size: 36px; text-align: center; @@ -31,22 +45,12 @@ body { } #fireworksCanvas { + background: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -} - -body, html { - width: 100%; - height: 100%; - margin: 0; - overflow: hidden; -} - -#countdown, #greetings, #previewButton { - position: relative; - z-index: 2; + pointer-events: none; /* 允许鼠标事件穿透canvas */ }