演習問題バグ修正 (Date) (#605)

Author: aster-void

docs/2-browser-apps/03-class/_samples/count-down/script.js

@@ -1,7 +1,23 @@
 const countdownBox = document.getElementById("countdown-box");
 
-const now = new Date();
-const remainingHours = 23 - now.getHours();
-const remainingMinutes = 59 - now.getMinutes();
-const remainingSeconds = 60 - now.getSeconds();
-countdownBox.textContent = `今日は残り${remainingHours}時間${remainingMinutes}分${remainingSeconds}秒です。`;
+function getRemainingTime() {
+  const now = new Date();
+  const endOfDay = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    23,
+    59,
+    59,
+    999,
+  );
+  const remainingTime = endOfDay.getTime() - now.getTime();
+
+  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
+  const minutes = Math.floor(remainingTime / (1000 * 60)) % 60;
+  const seconds = Math.floor(remainingTime / 1000) % 60;
+
+  return `今日の残り時間： ${hours}時間 ${minutes}分 ${seconds}秒です。`;
+}
+
+countdownBox.textContent = getRemainingTime();

docs/2-browser-apps/03-class/index.mdx

@@ -402,16 +402,32 @@ document.write(false.toString()); // false
 
 <Answer title="その日の残り時間">
 
-`Date#getHour`、`Date#getMinutes`、`Date#getSeconds` を使います。
+`Date#getTime` メソッドを使います。
 
 ```js
 const countdownBox = document.getElementById("countdown-box");
 
-const now = new Date();
-const remainingHours = 23 - now.getHours();
-const remainingMinutes = 59 - now.getMinutes();
-const remainingSeconds = 60 - now.getSeconds();
-countdownBox.textContent = `今日は残り${remainingHours}時間${remainingMinutes}分${remainingSeconds}秒です。`;
+function getRemainingTime() {
+  const now = new Date();
+  const endOfDay = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    23,
+    59,
+    59,
+    999,
+  );
+  const remainingTime = endOfDay.getTime() - now.getTime();
+
+  const hours = Math.floor(remainingTime / (1000 * 60 * 60));
+  const minutes = Math.floor(remainingTime / (1000 * 60)) % 60;
+  const seconds = Math.floor(remainingTime / 1000) % 60;
+
+  return `今日の残り時間： ${hours}時間 ${minutes}分 ${seconds}秒です。`;
+}
+
+countdownBox.textContent = getRemainingTime();
 ```
 
 <ViewSource url={import.meta.url} path="_samples/count-down" />