teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問JavaScriptによる時間制御

編集履歴

質問編集履歴

3

変更

2019/01/22 09:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -10,6 +10,18 @@
10
10
 
11
11
 
12
12
 
13
+ 【追記】
14
+
15
+ また残り23時間59分59秒と新たにカウントダウンが始まってしまいます
16
+
17
+
18
+
19
+ これについてですが、このプログラムの制御は残り時間が1時間を切ったら1秒更新でタイマーを切り替えています。
20
+
21
+ 残り時間が0秒になり、新たに残り23時間59分59秒と新たにカウントダウンが始まって場合は1秒更新でプログラムが動いているので制御はできていると思うのですが、コンソールすると時間にマイナス表記がありません。なぜでしょうか。
22
+
23
+
24
+
13
25
  ```
14
26
 
15
27
  <?php

2

変更

2019/01/22 09:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
@@ -1 +1 @@
1
- JavaScriptのよるPHP変数の値変更
1
+ JavaScriptによる時間制御
test CHANGED
@@ -1,46 +1,70 @@
1
- オークションの残り時間と入札ボタンを表示するプログラムがあります。完成品に入る前のプロトタイプですが。
2
-
3
- PHPの変数$endでこのオークションの残り時間が残っているかいないか判定します。
1
+ PHP変数$endがfalseであれば入札するボタンを、
4
-
5
- JavaScript内で残り時間が0になった時点で、$endの変数をtrueに変更したいのですが、どのように行えば良いですか。
2
+
6
-
7
- JSからPHPに値を渡すのと同じ作業ですか。
8
-
9
-
10
-
11
- 「追記１」
12
-
13
- 実現したい機能としては、時間切れになれば入札ボタンをこのオークションは終了していますという文字に変更したいです。
3
+ trueであれば'このオークションは終了しました'と表示させたいです。
14
-
4
+
5
+
6
+
15
- 厳密にいうと、時間残っている場合のみ入札ボタンを表示させたいです。
7
+ 先にPHPで締め切り時間をとってきます。その時点で過去であれば挙動は問題ないのですがJSで残り時間が0になると
8
+
16
-
9
+ location.reloadのところに行かずに、また残り23時間59分59秒と新たにカウントダウンが始まってしまいます。どこが問題でしょうか。
17
-
18
-
10
+
11
+
12
+
19
- ```PHP
13
+ ```
20
14
 
21
15
  <?php
22
16
 
17
+
18
+
23
19
  $end = false;
24
20
 
21
+ $year = 2019;
22
+
23
+ $month = 01;
24
+
25
+ $day = 20;
26
+
27
+ $hour = 19;
28
+
29
+ $minute = 37;
30
+
31
+ $second = 00;
32
+
33
+ $datetime = new DateTime("$year/$month/$day $hour:$minute:$second");
34
+
35
+ $current = new DateTime('now');
36
+
37
+ $diff= $current->diff($datetime);
38
+
39
+
40
+
41
+ if ($diff ->invert == 1) {
42
+
43
+ $end = true;
44
+
45
+ }
46
+
47
+
48
+
25
49
  ?>
26
50
 
51
+
52
+
27
- <html>
53
+ <!DOCTYPE html>
54
+
55
+ <html lang="en" dir="ltr">
28
56
 
29
57
 
30
58
 
31
59
  <head>
32
60
 
33
- <meta charset="UTF-8">
61
+ <meta charset="utf-8">
34
-
35
- <meta name="viewport" content="width=device-width,initial-scale=1">
62
+
36
-
37
- <meta http-equiv="x-ua-compatible" content="IE=edge">
38
-
39
- <title>5-01_countdown</title>
63
+ <title></title>
40
-
41
- <link href="../../book-js/_common/css/style.css" rel="stylesheet" type="text/css">
64
+
42
-
43
- <link rel="stylesheet" href="css.css">
65
+ <link rel="stylesheet" href="">
66
+
67
+ <script src="../Shopping/jquery-3.3.1.min.js"></script>
44
68
 
45
69
  </head>
46
70
 
@@ -50,39 +74,19 @@
50
74
 
51
75
 
52
76
 
53
- <header>
54
-
55
- <div class="header-contents">
56
-
57
- <h1>カウントダウンタイマー</h1>
58
-
59
- <h2>1秒ごとに再計算する</h2>
60
-
61
- </div>
62
-
63
- </header>
64
-
65
-
66
-
67
- <div class="main-wrapper">
77
+ <div class="dobid">
68
-
69
-
70
-
71
- <section>
78
+
72
-
73
- <p><span id="timer"></span>で終了</p>
79
+
74
-
75
- </section>
80
+
76
-
77
-
78
-
79
- <?php if($end == false): ?>
81
+ <?php if ($end == false): ?>
80
-
82
+
81
- <a class="btn" href="">入札する</a>
83
+ <a href="#">入札する</a>
84
+
82
-
85
+ <span>残り</span><span class="time"></span>
86
+
83
- <?php elseif($end == true): ?>
87
+ <?php elseif ($end == true): ?>
84
-
88
+
85
- <span>このオークションは終了しました</span>
89
+ <p>このオークションは終了しました</p>
86
90
 
87
91
  <?php endif ?>
88
92
 
@@ -92,97 +96,119 @@
92
96
 
93
97
 
94
98
 
95
- <footer>JavaScript Samples</footer>
99
+ </body>
96
-
97
-
98
-
100
+
101
+
102
+
99
- <script>
103
+ <script>
104
+
100
-
105
+ var end = '<?php echo $end; ?>';
106
+
107
+ var year = '<?php echo $year; ?>';
108
+
109
+ var month = '<?php echo $month; ?>';
110
+
111
+ var day = '<?php echo $day; ?>';
112
+
113
+ var hour = '<?php echo $hour; ?>';
114
+
115
+ var minute = '<?php echo $minute; ?>';
116
+
117
+
118
+
101
- var goal = new Date();
119
+ var cutoff = new Date();
120
+
102
-
121
+ cutoff.setFullYear(year);
122
+
123
+ cutoff.setMonth(month);
124
+
125
+ cutoff.setDate(day);
126
+
103
- goal.setHours(20);
127
+ cutoff.setHours(hour);
104
-
128
+
105
- goal.setMinutes(00);
129
+ cutoff.setMinutes(minute);
106
-
130
+
107
- goal.setSeconds(00);
131
+ cutoff.setSeconds(00);
108
-
109
-
110
-
132
+
133
+
134
+
111
- var countdown = function() {
135
+ var countdown = function(cutoff) {
112
-
136
+
113
- var now = new Date();
137
+ var now = new Date();
114
-
138
+
115
- var rest = goal.getTime() - now.getTime();
139
+ var rest = cutoff.getTime() - now.getTime();
116
-
140
+
117
- var sec = Math.floor(rest / 1000) % 60;
141
+ var sec = Math.floor(rest / 1000) % 60;
118
-
142
+
119
- var min = Math.floor(rest / 1000 / 60) % 60;
143
+ var min = Math.floor(rest / 1000 / 60) % 60;
120
-
144
+
121
- var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
145
+ var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
122
-
146
+
123
- var days = Math.floor(rest / 1000 / 60 / 60 / 24);
147
+ var days = Math.floor(rest / 1000 / 60 / 60 / 24);
124
-
148
+
125
- var count = [days, hours, min, sec];
149
+ var count = [days, hours, min, sec];
126
-
150
+
127
- return count;
151
+ return count;
152
+
153
+ }
154
+
155
+
156
+
157
+ var recalc = function() {
158
+
159
+ var count = countdown(cutoff);
160
+
161
+ if (count[2] < 0) {
162
+
163
+ location.reload();//質問
164
+
165
+ } else {
166
+
167
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
168
+
169
+ $('.time').text(time);
170
+
171
+ refresh();
128
172
 
129
173
  }
130
174
 
131
-
175
+ }
132
-
176
+
177
+
178
+
133
- var recalc = function() {
179
+ var refresh = function() {
180
+
134
-
181
+ setTimeout(recalc, 1000);
182
+
183
+ }
184
+
185
+
186
+
187
+ if (end == false) {
188
+
135
- var count = countdown();
189
+ var count = countdown(cutoff);
136
-
190
+
191
+
192
+
137
- if (count[3] < 0) {
193
+ if (count[2] < 0) {
138
-
194
+
139
- document.getElementById('end').textContent = '終了しました';
195
+ location.reload();//質問
196
+
140
-
197
+ } else if (count[1] < 1) {
198
+
199
+ recalc();
200
+
141
- } else {
201
+ } else {
142
-
202
+
143
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
203
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
144
-
204
+
145
- document.getElementById('timer').textContent = time;
205
+ $('.time').text(time);
146
-
147
- refresh();
148
-
149
- }
150
206
 
151
207
  }
152
208
 
153
-
154
-
155
- var refresh = function() {
156
-
157
- setTimeout(recalc, 1000);
158
-
159
- }
209
+ }
160
-
161
-
162
-
163
- var count = countdown();
210
+
164
-
165
-
166
-
167
- if (count[3] < 0) {
168
-
169
- document.getElementById('end').textContent = '終了';
170
-
171
- } else if (count[1] < 1) {
172
-
173
- recalc();
174
-
175
- } else {
176
-
177
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
178
-
179
- document.getElementById('timer').textContent = time;
180
-
181
- }
182
-
183
- </script>
211
+ </script>
184
-
185
- </body>
186
212
 
187
213
 
188
214
 

1

追記

2019/01/20 10:47

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -7,6 +7,12 @@
7
7
  JSからPHPに値を渡すのと同じ作業ですか。
8
8
 
9
9
 
10
+
11
+ 「追記１」
12
+
13
+ 実現したい機能としては、時間切れになれば入札ボタンをこのオークションは終了していますという文字に変更したいです。
14
+
15
+ 厳密にいうと、時間残っている場合のみ入札ボタンを表示させたいです。
10
16
 
11
17
 
12
18