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

編集履歴

質問編集履歴

6

追加

2019/01/17 10:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -70,15 +70,17 @@
70
70
 
71
71
  <script>
72
72
 
73
- var now = new Date();
73
+ var now = new Date();
74
74
 
75
75
  var goal = new Date();
76
76
 
77
- goal.setHours(22);
77
+ goal.setHours(19);
78
78
 
79
- goal.setMinutes(50);
79
+ goal.setMinutes(59);
80
80
 
81
- goal.setSeconds(00);
81
+ goal.setSeconds(59);
82
+
83
+
82
84
 
83
85
  var rest = goal.getTime() - now.getTime();
84
86
 
@@ -92,11 +94,19 @@
92
94
 
93
95
 
94
96
 
97
+ var countdown = function() {
95
98
 
99
+ var cdnow = new Date();//追加
96
100
 
97
- var countdown = function(goal) {
101
+ var cdgoal = new Date();//追加
98
102
 
103
+ cdgoal.setHours(19);//追加
104
+
105
+ cdgoal.setMinutes(59);//追加
106
+
107
+ cdgoal.setSeconds(59);//追加
108
+
99
- var cdrest = goal.getTime() - now.getTime();
109
+ var cdrest = cdgoal.getTime() - cdnow.getTime();
100
110
 
101
111
  var cdsec = Math.floor(cdrest / 1000) % 60;
102
112
 
@@ -108,6 +118,8 @@
108
118
 
109
119
  var cdcount = [cddays, cdhours, cdmin, cdsec];
110
120
 
121
+ console.log(cdsec);
122
+
111
123
  return cdcount;
112
124
 
113
125
  }
@@ -116,13 +128,13 @@
116
128
 
117
129
  var recalc = function() {
118
130
 
119
- var count = countdown(goal);
131
+ console.log(0);
120
132
 
121
- var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
133
+ var counter = countdown();
122
134
 
123
- document.getElementById('timer').textContent = time2;
135
+ var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
124
136
 
125
- console.log(2);
137
+ document.getElementById('timer').textContent = time;
126
138
 
127
139
  refresh();
128
140
 
@@ -134,27 +146,23 @@
134
146
 
135
147
  setTimeout(recalc, 1000);
136
148
 
137
- console.log(3);
138
-
139
149
  }
140
150
 
141
151
 
142
152
 
143
153
  if (hours < 1) {
144
154
 
145
- console.log(1);
146
-
147
155
  recalc();
148
156
 
149
157
  } else {
150
158
 
151
- var time = hours + '時間' + min + '分' + sec + '秒';
159
+ var time1 = hours + '時間' + min + '分' + sec + '秒';
152
160
 
153
- document.getElementById('timer').textContent = time;
161
+ document.getElementById('timer').textContent = time1;
154
162
 
155
163
  }
156
164
 
157
- <script>
165
+ </script>
158
166
 
159
167
  </body>
160
168
 

5

コード変更

2019/01/17 10:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -70,17 +70,15 @@
70
70
 
71
71
  <script>
72
72
 
73
- var goal = new Date();
73
+ var now = new Date();
74
74
 
75
- goal.setHours(21);
75
+ var goal = new Date();
76
76
 
77
+ goal.setHours(22);
78
+
77
- goal.setMinutes(30);
79
+ goal.setMinutes(50);
78
80
 
79
81
  goal.setSeconds(00);
80
-
81
-
82
-
83
- var now = new Date();
84
82
 
85
83
  var rest = goal.getTime() - now.getTime();
86
84
 
@@ -96,19 +94,17 @@
96
94
 
97
95
 
98
96
 
99
- var countdown = function(due) {
97
+ var countdown = function(goal) {
100
98
 
101
- var cdnow = new Date();
99
+ var cdrest = goal.getTime() - now.getTime();
102
100
 
103
- var cdrest = due.getTime() - now.getTime();
101
+ var cdsec = Math.floor(cdrest / 1000) % 60;
104
102
 
105
- var cdsec = Math.floor(rest / 1000) % 60;
103
+ var cdmin = Math.floor(cdrest / 1000 / 60) % 60;
106
104
 
107
- var cdmin = Math.floor(rest / 1000 / 60) % 60;
105
+ var cdhours = Math.floor(cdrest / 1000 / 60 / 60) % 24;
108
106
 
109
- var cdhours = Math.floor(rest / 1000 / 60 / 60) % 24;
110
-
111
- var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
107
+ var cddays = Math.floor(cdrest / 1000 / 60 / 60 / 24);
112
108
 
113
109
  var cdcount = [cddays, cdhours, cdmin, cdsec];
114
110
 
@@ -120,13 +116,13 @@
120
116
 
121
117
  var recalc = function() {
122
118
 
123
- console.log(2);
124
-
125
119
  var count = countdown(goal);
126
120
 
127
121
  var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
128
122
 
129
123
  document.getElementById('timer').textContent = time2;
124
+
125
+ console.log(2);
130
126
 
131
127
  refresh();
132
128
 
@@ -137,6 +133,8 @@
137
133
  var refresh = function() {
138
134
 
139
135
  setTimeout(recalc, 1000);
136
+
137
+ console.log(3);
140
138
 
141
139
  }
142
140
 
@@ -150,11 +148,13 @@
150
148
 
151
149
  } else {
152
150
 
153
- var time = hours + '時間' + min + '分' + min + '秒';
151
+ var time = hours + '時間' + min + '分' + sec + '秒';
154
152
 
155
153
  document.getElementById('timer').textContent = time;
156
154
 
157
155
  }
156
+
157
+ <script>
158
158
 
159
159
  </body>
160
160
 

4

コード変更

2019/01/16 13:41

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -72,11 +72,27 @@
72
72
 
73
73
  var goal = new Date();
74
74
 
75
- goal.setHours(19);
75
+ goal.setHours(21);
76
76
 
77
77
  goal.setMinutes(30);
78
78
 
79
79
  goal.setSeconds(00);
80
+
81
+
82
+
83
+ var now = new Date();
84
+
85
+ var rest = goal.getTime() - now.getTime();
86
+
87
+ var sec = Math.floor(rest / 1000) % 60;
88
+
89
+ var min = Math.floor(rest / 1000 / 60) % 60;
90
+
91
+ var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
92
+
93
+ var days = Math.floor(rest / 1000 / 60 / 60 / 24);
94
+
95
+
80
96
 
81
97
 
82
98
 
@@ -94,7 +110,7 @@
94
110
 
95
111
  var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
96
112
 
97
- var cdcount = [days, hours, min, sec];
113
+ var cdcount = [cddays, cdhours, cdmin, cdsec];
98
114
 
99
115
  return cdcount;
100
116
 
@@ -104,11 +120,13 @@
104
120
 
105
121
  var recalc = function() {
106
122
 
123
+ console.log(2);
124
+
107
125
  var count = countdown(goal);
108
126
 
109
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
127
+ var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
110
128
 
111
- document.getElementById('timer').textContent = time;
129
+ document.getElementById('timer').textContent = time2;
112
130
 
113
131
  refresh();
114
132
 
@@ -124,23 +142,9 @@
124
142
 
125
143
 
126
144
 
127
- var now = new Date();
145
+ if (hours < 1) {
128
146
 
129
- var rest = goal.getTime() - now.getTime();
130
-
131
- var sec = Math.floor(rest / 1000) % 60;
132
-
133
- var min = Math.floor(rest / 1000 / 60) % 60;
134
-
135
- var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
136
-
137
- var days = Math.floor(rest / 1000 / 60 / 60 / 24);
138
-
139
- var count = [days, hours, min, sec];
140
-
141
-
142
-
143
- if (hours < 1) {
147
+ console.log(1);
144
148
 
145
149
  recalc();
146
150
 
@@ -152,28 +156,6 @@
152
156
 
153
157
  }
154
158
 
155
-
156
-
157
- var countdown = function(due) {
158
-
159
- rest = due.getTime() - now.getTime();
160
-
161
- sec = Math.floor(rest / 1000) % 60;
162
-
163
- min = Math.floor(rest / 1000 / 60) % 60;
164
-
165
- hours = Math.floor(rest / 1000 / 60 / 60) % 24;
166
-
167
- days = Math.floor(rest / 1000 / 60 / 60 / 24);
168
-
169
- count = [days, hours, min, sec];
170
-
171
- return count;
172
-
173
- }
174
-
175
- </script>
176
-
177
159
  </body>
178
160
 
179
161
 

3

コード変更。

2019/01/16 12:27

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,16 @@
70
70
 
71
71
  <script>
72
72
 
73
+ var goal = new Date();
74
+
75
+ goal.setHours(19);
76
+
77
+ goal.setMinutes(30);
78
+
79
+ goal.setSeconds(00);
80
+
81
+
82
+
73
83
  var countdown = function(due) {
74
84
 
75
85
  var cdnow = new Date();
@@ -92,15 +102,25 @@
92
102
 
93
103
 
94
104
 
95
- var goal = new Date();
105
+ var recalc = function() {
96
106
 
97
- goal.setHours(22);
107
+ var count = countdown(goal);
98
108
 
99
- goal.setMinutes(59);
109
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
100
110
 
111
+ document.getElementById('timer').textContent = time;
112
+
101
- goal.setSeconds(59);
113
+ refresh();
114
+
115
+ }
102
116
 
103
117
 
118
+
119
+ var refresh = function() {
120
+
121
+ setTimeout(recalc, 1000);
122
+
123
+ }
104
124
 
105
125
 
106
126
 
@@ -152,28 +172,6 @@
152
172
 
153
173
  }
154
174
 
155
-
156
-
157
- var recalc = function() {
158
-
159
- var count = countdown(goal);
160
-
161
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
162
-
163
- document.getElementById('timer').textContent = time;
164
-
165
- refresh();
166
-
167
- }
168
-
169
-
170
-
171
- var refresh = function() {
172
-
173
- setTimeout(recalc, 1000);
174
-
175
- }
176
-
177
175
  </script>
178
176
 
179
177
  </body>

2

編集

2019/01/16 10:05

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -1,12 +1,20 @@
1
1
  ネットを参考に残り時間を指定日までの残り時間を１秒ずつ表示するプログラムを作成しました。
2
2
 
3
- 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいのですが、どのようにすればよろしいでしょうか。特にあと１時間という情報はどうしとくすれば良いでしょうか。(Math.floor(rest / 1000 / 60 / 60) < 1 とかでしょうか)
3
+ 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいです。(１時間以上ある場合はPHPのようにページの更新で残り時間が変更するようにします)
4
-
5
- 簡単なサンプルコード等あれば非常に助かります。
6
4
 
7
5
 
8
6
 
7
+ 問題❶
8
+
9
+ goalの時間を１時間未満にすると表示されない。
10
+
9
- また条件分岐はどのように行うのがこの場合は適切でしょうか。
11
+ どこが問題か教えていただけますでしょうか。
12
+
13
+
14
+
15
+ 問題❷
16
+
17
+ JSは本当に始めたばかりですが、このコードは不細工すぎると思うので、少し改善点を教えてください。
10
18
 
11
19
 
12
20
 
@@ -64,23 +72,81 @@
64
72
 
65
73
  var countdown = function(due) {
66
74
 
67
- var now = new Date();
75
+ var cdnow = new Date();
76
+
77
+ var cdrest = due.getTime() - now.getTime();
78
+
79
+ var cdsec = Math.floor(rest / 1000) % 60;
80
+
81
+ var cdmin = Math.floor(rest / 1000 / 60) % 60;
82
+
83
+ var cdhours = Math.floor(rest / 1000 / 60 / 60) % 24;
84
+
85
+ var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
86
+
87
+ var cdcount = [days, hours, min, sec];
88
+
89
+ return cdcount;
90
+
91
+ }
68
92
 
69
93
 
70
94
 
71
- var rest = due.getTime() - now.getTime();
95
+ var goal = new Date();
72
96
 
73
- var sec = Math.floor(rest / 1000) % 60;
97
+ goal.setHours(22);
74
98
 
75
- var min = Math.floor(rest / 1000 / 60) % 60;
99
+ goal.setMinutes(59);
76
100
 
77
- var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
78
-
79
- var days = Math.floor(rest / 1000 / 60 / 60 / 24);
80
-
81
- var count = [days, hours, min, sec];
101
+ goal.setSeconds(59);
82
102
 
83
103
 
104
+
105
+
106
+
107
+ var now = new Date();
108
+
109
+ var rest = goal.getTime() - now.getTime();
110
+
111
+ var sec = Math.floor(rest / 1000) % 60;
112
+
113
+ var min = Math.floor(rest / 1000 / 60) % 60;
114
+
115
+ var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
116
+
117
+ var days = Math.floor(rest / 1000 / 60 / 60 / 24);
118
+
119
+ var count = [days, hours, min, sec];
120
+
121
+
122
+
123
+ if (hours < 1) {
124
+
125
+ recalc();
126
+
127
+ } else {
128
+
129
+ var time = hours + '時間' + min + '分' + min + '秒';
130
+
131
+ document.getElementById('timer').textContent = time;
132
+
133
+ }
134
+
135
+
136
+
137
+ var countdown = function(due) {
138
+
139
+ rest = due.getTime() - now.getTime();
140
+
141
+ sec = Math.floor(rest / 1000) % 60;
142
+
143
+ min = Math.floor(rest / 1000 / 60) % 60;
144
+
145
+ hours = Math.floor(rest / 1000 / 60 / 60) % 24;
146
+
147
+ days = Math.floor(rest / 1000 / 60 / 60 / 24);
148
+
149
+ count = [days, hours, min, sec];
84
150
 
85
151
  return count;
86
152
 
@@ -88,21 +154,11 @@
88
154
 
89
155
 
90
156
 
91
- var goal = new Date();
92
-
93
- goal.setHours(23);
94
-
95
- goal.setMinutes(59);
96
-
97
- goal.setSeconds(59);
98
-
99
-
100
-
101
157
  var recalc = function() {
102
158
 
103
- var counter = countdown(goal);
159
+ var count = countdown(goal);
104
160
 
105
- var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
161
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
106
162
 
107
163
  document.getElementById('timer').textContent = time;
108
164
 
@@ -118,8 +174,6 @@
118
174
 
119
175
  }
120
176
 
121
- recalc();
122
-
123
177
  </script>
124
178
 
125
179
  </body>
@@ -128,4 +182,6 @@
128
182
 
129
183
  </html>
130
184
 
185
+
186
+
131
187
  ```

1

追記

2019/01/15 13:31

投稿

Chandler_Bing
Chandler_Bing

スコア673

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,12 @@
1
1
  ネットを参考に残り時間を指定日までの残り時間を１秒ずつ表示するプログラムを作成しました。
2
2
 
3
- 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいのですが、どのようにすればよろしいでしょうか。特にあと１時間という情報はどうしとくすれば良いでしょうか。
3
+ 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいのですが、どのようにすればよろしいでしょうか。特にあと１時間という情報はどうしとくすれば良いでしょうか。(Math.floor(rest / 1000 / 60 / 60) < 1 とかでしょうか)
4
4
 
5
5
  簡単なサンプルコード等あれば非常に助かります。
6
+
7
+
8
+
9
+ また条件分岐はどのように行うのがこの場合は適切でしょうか。
6
10
 
7
11
 
8
12