From 8d1731fcc688757525f8ec797dbcd4a3820b7bb1 Mon Sep 17 00:00:00 2001 From: Z3r0c0k3 <hackerj1128@gmail.com> Date: Wed, 26 Jun 2024 17:06:53 +0900 Subject: [PATCH] add: script.js | modify: api, index, pre-csat.html --- api.html | 22 +++++++++++----------- index.html | 10 +++++----- pre-csat.html | 12 ++++++------ script.js | 39 +++++++++++++++++++++++++++++++++++++++ style.css | 4 ++-- 5 files changed, 63 insertions(+), 24 deletions(-) create mode 100644 script.js diff --git a/api.html b/api.html index 4de2559..518145a 100644 --- a/api.html +++ b/api.html @@ -39,7 +39,7 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 대학수학능력시험</div> + <div class="CSAT-text">2025학년도 대학수학능력시험</div> <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> </div> <!-- 3mo --> @@ -56,8 +56,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 3월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 3월 모의고사</div> + <span class="D-Day-3mo"> 000 : 00 : 00 : 00 . 00 </span> </div> </div> <!-- 2026 --> @@ -75,8 +75,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2026학년도 대학수학능력시험</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2026학년도 대학수학능력시험</div> + <span class="D-Day-2026"> 000 : 00 : 00 : 00 . 00 </span> </div> <!-- 6mo --> <div class="Rectangle-1"> @@ -92,8 +92,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 6월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 6월 모의고사</div> + <span class="D-Day-6mo"> 000 : 00 : 00 : 00 . 00 </span> </div> </div> @@ -112,8 +112,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2027학년도 대학수학능력시험</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2027학년도 대학수학능력시험</div> + <span class="D-Day-2027"> 000 : 00 : 00 : 00 . 00 </span> </div> <!-- 9mo --> <div class="Rectangle-1"> @@ -129,8 +129,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 9월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 9월 모의고사</div> + <span class="D-Day-9mo"> 000 : 00 : 00 : 00 . 00 </span> </div> </div> </main> diff --git a/index.html b/index.html index 90b0094..73edaf1 100644 --- a/index.html +++ b/index.html @@ -41,7 +41,7 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 대학수학능력시험</div> + <div class="CSAT-text">2025학년도 대학수학능력시험</div> <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> </div> <!-- 응원에 한마디..! --> @@ -62,8 +62,8 @@ <h1 class="victory_message">괜찮아요. 다 할 수 있어요.</h1> <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2026학년도 대학수학능력시험</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2026학년도 대학수학능력시험</div> + <span class="D-Day-2026"> 000 : 00 : 00 : 00 . 00 </span> </div> <div class="timer"> <a href="timer.html" target="_blank"><h1>수능 타이머</h1></a> @@ -84,8 +84,8 @@ <h1 class="victory_message">괜찮아요. 다 할 수 있어요.</h1> <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2027학년도 대학수학능력시험</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2027학년도 대학수학능력시험</div> + <span class="D-Day-2027"> 000 : 00 : 00 : 00 . 00 </span> </div> </main> </body> diff --git a/pre-csat.html b/pre-csat.html index d743e3b..49d92cb 100644 --- a/pre-csat.html +++ b/pre-csat.html @@ -41,8 +41,8 @@ <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 3월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 3월 모의고사</div> + <span class="D-Day-3mo"> 000 : 00 : 00 : 00 . 00 </span> </div> <!-- 응원에 한마디..! --> <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1> @@ -62,8 +62,8 @@ <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1> <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 6월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 6월 모의고사</div> + <span class="D-Day-6mo"> 000 : 00 : 00 : 00 . 00 </span> </div> <div class="timer"> <a href="timer.html" target="_blank"><h1>모의고사 타이머</h1></a> @@ -84,8 +84,8 @@ <h1 class="victory_message">괜찮아요. 다 잘 될거예요.</h1> <div class="row"> <div class="Vector-1"></div> </div> - <div class="CSAT-2025-text">2025학년도 9월 모의고사</div> - <span class="D-Day-2025"> 000 : 00 : 00 : 00 . 00 </span> + <div class="CSAT-text">2025학년도 9월 모의고사</div> + <span class="D-Day-9mo"> 000 : 00 : 00 : 00 . 00 </span> </div> </main> </body> diff --git a/script.js b/script.js new file mode 100644 index 0000000..e54f2c5 --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ + +document.addEventListener('DOMContentLoaded', () => { // 문서 로드 후 실행 + const targetDates = { + 'D-Day-2025': new Date('2024-11-14T08:00:00').getTime(), + 'D-Day-2026': new Date('2025-11-13T08:00:00').getTime(), + 'D-Day-2027': new Date('2026-11-19T08:00:00').getTime(), + 'D-Day-3mo': new Date('2024-03-28T08:00:00').getTime(), + 'D-Day-6mo': new Date('2024-06-04T08:00:00').getTime(), + 'D-Day-9mo': new Date('2024-09-04T08:00:00').getTime(), + }; + + function updateDday(className, targetDate) { + const ddaySpans = document.querySelectorAll(`.${className}`); // 여러 span 요소 선택 + + ddaySpans.forEach(ddaySpan => { + const now = new Date().getTime(); + const timeDifference = targetDate - now; + + if (timeDifference <= 0) { + console.log(`${className}: D-DAY!`); + } + + const days = Math.max(0, Math.floor(timeDifference / (1000 * 60 * 60 * 24))); + const hours = Math.max(0, Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))); + const minutes = Math.max(0, Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60))); + const seconds = Math.max(0, Math.floor((timeDifference % (1000 * 60)) / 1000)); + const milliseconds = Math.max(0, timeDifference % 1000); + + const formattedDday = `${days.toString().padStart(3, '0')} : ${hours.toString().padStart(2, '0')} : ${minutes.toString().padStart(2, '0')} : ${seconds.toString().padStart(2, '0')} . ${milliseconds.toString().padStart(2, '0')}`; + + ddaySpan.innerText = formattedDday; + }); + } + + for (const className in targetDates) { + updateDday(className, targetDates[className]); + setInterval(() => updateDday(className, targetDates[className]), 1); + } +}); diff --git a/style.css b/style.css index da995c8..3b5fa90 100644 --- a/style.css +++ b/style.css @@ -249,7 +249,7 @@ main { flex-grow: 0; background-color: #000; } -.CSAT-2025-text { +.CSAT-text { width: 100%; height: 15.6%; flex-grow: 0; @@ -264,7 +264,7 @@ main { text-align: center; color: #000; } -.D-Day-2025 { +.D-Day-2025, .D-Day-2026, .D-Day-2027, .D-Day-3mo, .D-Day-6mo, .D-Day-9mo { width: 88.2%; height: 40%; flex-grow: 0;