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