回答編集履歴
2
文言修正\(getHours -> setHours\)、jsfiddle追加
answer
CHANGED
|
@@ -1,18 +1,48 @@
|
|
|
1
|
-
|
|
1
|
+
### Date.prototype.setHours
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`Date.prototype.setHours` を使ってみてはどうでしょうか。
|
|
4
4
|
|
|
5
|
+
- [Date.prototype.setHours() - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/setHours)
|
|
6
|
+
- [window.setTimeout - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout)
|
|
7
|
+
- [22:00までカウントダウン - JSFiddle](https://jsfiddle.net/h1f0ua8r/)
|
|
8
|
+
|
|
9
|
+
```HTML
|
|
10
|
+
<div class="Timer">
|
|
11
|
+
<p>カウントダウン終了まで</p>
|
|
12
|
+
<div id="TimeLeft"></div>
|
|
13
|
+
</div>
|
|
5
|
-
|
|
14
|
+
<script>
|
|
6
15
|
'use strict';
|
|
7
16
|
setTimeout(function countdown (element) {
|
|
8
|
-
var endTime = new Date,
|
|
17
|
+
var endTime = new Date,
|
|
18
|
+
now = new Date,
|
|
19
|
+
floor = Math.floor,
|
|
20
|
+
diffTime;
|
|
21
|
+
|
|
9
22
|
endTime.setHours(22, 0, 0);
|
|
23
|
+
diffTime = endTime - now;
|
|
10
24
|
|
|
11
|
-
if (
|
|
25
|
+
if (diffTime > 0) {
|
|
26
|
+
element.textContent = floor(diffTime / 3600000) + '時間' + floor((diffTime % 3600000) / 60000) + '分' + floor((diffTime % 60000) / 1000) + '秒';
|
|
12
|
-
|
|
27
|
+
console.log(now);
|
|
28
|
+
console.log(element.textContent);
|
|
13
|
-
setTimeout(countdown, 1000);
|
|
29
|
+
setTimeout(countdown, 1000, element);
|
|
30
|
+
} else {
|
|
31
|
+
element.textContent = '終了';
|
|
14
32
|
}
|
|
15
33
|
}, 1000, document.getElementById('TimeLeft'));
|
|
34
|
+
</script>
|
|
16
35
|
```
|
|
17
36
|
|
|
37
|
+
### 22:00 を過ぎたら終了
|
|
38
|
+
|
|
39
|
+
> 時刻を過ぎたら'終了'というテキストを表示させたいです。
|
|
40
|
+
|
|
41
|
+
こちらはタイマー起動時の判定処理で考え方が2通りあります。
|
|
42
|
+
|
|
43
|
+
- 23:00にタイマーを始動した場合、既に22:00を過ぎているので「終了」を出力する
|
|
44
|
+
- 23:00にタイマーを始動した場合、翌日の22:00はまだ過ぎてないので翌日の22:00を目指してカウントダウンを開始する
|
|
45
|
+
|
|
46
|
+
私が書いたコードは前者です。
|
|
47
|
+
|
|
18
48
|
Re: jkita1456 さん
|
1
カウントダウン出力条件コードの修正
answer
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
var endTime = new Date, now = new Date;
|
|
9
9
|
endTime.setHours(22, 0, 0);
|
|
10
10
|
|
|
11
|
-
if (endTime > now) {
|
|
11
|
+
if (endTime => now) {
|
|
12
12
|
// カウントダウン出力
|
|
13
13
|
setTimeout(countdown, 1000);
|
|
14
14
|
}
|