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

編集履歴

質問編集履歴

6

追加

2019/01/17 10:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

title CHANGED
File without changes
body CHANGED
@@ -34,49 +34,53 @@
34
34
  </div><!-- /.main-wrapper -->
35
35
  <footer>JavaScript Samples</footer>
36
36
  <script>
37
- var now = new Date();
37
+ var now = new Date();
38
38
  var goal = new Date();
39
- goal.setHours(22);
39
+ goal.setHours(19);
40
- goal.setMinutes(50);
40
+ goal.setMinutes(59);
41
- goal.setSeconds(00);
41
+ goal.setSeconds(59);
42
+
42
43
  var rest = goal.getTime() - now.getTime();
43
44
  var sec = Math.floor(rest / 1000) % 60;
44
45
  var min = Math.floor(rest / 1000 / 60) % 60;
45
46
  var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
46
47
  var days = Math.floor(rest / 1000 / 60 / 60 / 24);
47
48
 
48
-
49
- var countdown = function(goal) {
49
+ var countdown = function() {
50
+ var cdnow = new Date();//追加
51
+ var cdgoal = new Date();//追加
52
+ cdgoal.setHours(19);//追加
53
+ cdgoal.setMinutes(59);//追加
54
+ cdgoal.setSeconds(59);//追加
50
- var cdrest = goal.getTime() - now.getTime();
55
+ var cdrest = cdgoal.getTime() - cdnow.getTime();
51
56
  var cdsec = Math.floor(cdrest / 1000) % 60;
52
57
  var cdmin = Math.floor(cdrest / 1000 / 60) % 60;
53
58
  var cdhours = Math.floor(cdrest / 1000 / 60 / 60) % 24;
54
59
  var cddays = Math.floor(cdrest / 1000 / 60 / 60 / 24);
55
60
  var cdcount = [cddays, cdhours, cdmin, cdsec];
61
+ console.log(cdsec);
56
62
  return cdcount;
57
63
  }
58
64
 
59
65
  var recalc = function() {
66
+ console.log(0);
60
- var count = countdown(goal);
67
+ var counter = countdown();
61
- var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
68
+ var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
62
- document.getElementById('timer').textContent = time2;
69
+ document.getElementById('timer').textContent = time;
63
- console.log(2);
64
70
  refresh();
65
71
  }
66
72
 
67
73
  var refresh = function() {
68
74
  setTimeout(recalc, 1000);
69
- console.log(3);
70
75
  }
71
76
 
72
77
  if (hours < 1) {
73
- console.log(1);
74
78
  recalc();
75
79
  } else {
76
- var time = hours + '時間' + min + '分' + sec + '秒';
80
+ var time1 = hours + '時間' + min + '分' + sec + '秒';
77
- document.getElementById('timer').textContent = time;
81
+ document.getElementById('timer').textContent = time1;
78
82
  }
79
- <script>
83
+ </script>
80
84
  </body>
81
85
 
82
86
  </html>

5

コード変更

2019/01/17 10:56

投稿

Chandler_Bing
Chandler_Bing

スコア673

title CHANGED
File without changes
body CHANGED
@@ -34,12 +34,11 @@
34
34
  </div><!-- /.main-wrapper -->
35
35
  <footer>JavaScript Samples</footer>
36
36
  <script>
37
+ var now = new Date();
37
- var goal = new Date();
38
+ var goal = new Date();
38
- goal.setHours(21);
39
+ goal.setHours(22);
39
- goal.setMinutes(30);
40
+ goal.setMinutes(50);
40
41
  goal.setSeconds(00);
41
-
42
- var now = new Date();
43
42
  var rest = goal.getTime() - now.getTime();
44
43
  var sec = Math.floor(rest / 1000) % 60;
45
44
  var min = Math.floor(rest / 1000 / 60) % 60;
@@ -47,36 +46,37 @@
47
46
  var days = Math.floor(rest / 1000 / 60 / 60 / 24);
48
47
 
49
48
 
50
- var countdown = function(due) {
49
+ var countdown = function(goal) {
51
- var cdnow = new Date();
52
- var cdrest = due.getTime() - now.getTime();
50
+ var cdrest = goal.getTime() - now.getTime();
53
- var cdsec = Math.floor(rest / 1000) % 60;
51
+ var cdsec = Math.floor(cdrest / 1000) % 60;
54
- var cdmin = Math.floor(rest / 1000 / 60) % 60;
52
+ var cdmin = Math.floor(cdrest / 1000 / 60) % 60;
55
- var cdhours = Math.floor(rest / 1000 / 60 / 60) % 24;
53
+ var cdhours = Math.floor(cdrest / 1000 / 60 / 60) % 24;
56
- var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
54
+ var cddays = Math.floor(cdrest / 1000 / 60 / 60 / 24);
57
55
  var cdcount = [cddays, cdhours, cdmin, cdsec];
58
56
  return cdcount;
59
57
  }
60
58
 
61
59
  var recalc = function() {
62
- console.log(2);
63
60
  var count = countdown(goal);
64
61
  var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
65
62
  document.getElementById('timer').textContent = time2;
63
+ console.log(2);
66
64
  refresh();
67
65
  }
68
66
 
69
67
  var refresh = function() {
70
68
  setTimeout(recalc, 1000);
69
+ console.log(3);
71
70
  }
72
71
 
73
72
  if (hours < 1) {
74
73
  console.log(1);
75
74
  recalc();
76
75
  } else {
77
- var time = hours + '時間' + min + '分' + min + '秒';
76
+ var time = hours + '時間' + min + '分' + sec + '秒';
78
77
  document.getElementById('timer').textContent = time;
79
78
  }
79
+ <script>
80
80
  </body>
81
81
 
82
82
  </html>

4

コード変更

2019/01/16 13:41

投稿

Chandler_Bing
Chandler_Bing

スコア673

title CHANGED
File without changes
body CHANGED
@@ -35,10 +35,18 @@
35
35
  <footer>JavaScript Samples</footer>
36
36
  <script>
37
37
  var goal = new Date();
38
- goal.setHours(19);
38
+ goal.setHours(21);
39
39
  goal.setMinutes(30);
40
40
  goal.setSeconds(00);
41
41
 
42
+ var now = new Date();
43
+ var rest = goal.getTime() - now.getTime();
44
+ var sec = Math.floor(rest / 1000) % 60;
45
+ var min = Math.floor(rest / 1000 / 60) % 60;
46
+ var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
47
+ var days = Math.floor(rest / 1000 / 60 / 60 / 24);
48
+
49
+
42
50
  var countdown = function(due) {
43
51
  var cdnow = new Date();
44
52
  var cdrest = due.getTime() - now.getTime();
@@ -46,14 +54,15 @@
46
54
  var cdmin = Math.floor(rest / 1000 / 60) % 60;
47
55
  var cdhours = Math.floor(rest / 1000 / 60 / 60) % 24;
48
56
  var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
49
- var cdcount = [days, hours, min, sec];
57
+ var cdcount = [cddays, cdhours, cdmin, cdsec];
50
58
  return cdcount;
51
59
  }
52
60
 
53
61
  var recalc = function() {
62
+ console.log(2);
54
63
  var count = countdown(goal);
55
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
64
+ var time2 = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
56
- document.getElementById('timer').textContent = time;
65
+ document.getElementById('timer').textContent = time2;
57
66
  refresh();
58
67
  }
59
68
 
@@ -61,31 +70,13 @@
61
70
  setTimeout(recalc, 1000);
62
71
  }
63
72
 
64
- var now = new Date();
65
- var rest = goal.getTime() - now.getTime();
66
- var sec = Math.floor(rest / 1000) % 60;
67
- var min = Math.floor(rest / 1000 / 60) % 60;
68
- var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
69
- var days = Math.floor(rest / 1000 / 60 / 60 / 24);
70
- var count = [days, hours, min, sec];
71
-
72
73
  if (hours < 1) {
74
+ console.log(1);
73
75
  recalc();
74
76
  } else {
75
77
  var time = hours + '時間' + min + '分' + min + '秒';
76
78
  document.getElementById('timer').textContent = time;
77
79
  }
78
-
79
- var countdown = function(due) {
80
- rest = due.getTime() - now.getTime();
81
- sec = Math.floor(rest / 1000) % 60;
82
- min = Math.floor(rest / 1000 / 60) % 60;
83
- hours = Math.floor(rest / 1000 / 60 / 60) % 24;
84
- days = Math.floor(rest / 1000 / 60 / 60 / 24);
85
- count = [days, hours, min, sec];
86
- return count;
87
- }
88
- </script>
89
80
  </body>
90
81
 
91
82
  </html>

3

コード変更。

2019/01/16 12:27

投稿

Chandler_Bing
Chandler_Bing

スコア673

title CHANGED
File without changes
body CHANGED
@@ -34,6 +34,11 @@
34
34
  </div><!-- /.main-wrapper -->
35
35
  <footer>JavaScript Samples</footer>
36
36
  <script>
37
+ var goal = new Date();
38
+ goal.setHours(19);
39
+ goal.setMinutes(30);
40
+ goal.setSeconds(00);
41
+
37
42
  var countdown = function(due) {
38
43
  var cdnow = new Date();
39
44
  var cdrest = due.getTime() - now.getTime();
@@ -45,11 +50,16 @@
45
50
  return cdcount;
46
51
  }
47
52
 
48
- var goal = new Date();
53
+ var recalc = function() {
49
- goal.setHours(22);
50
- goal.setMinutes(59);
51
- goal.setSeconds(59);
54
+ var count = countdown(goal);
55
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
56
+ document.getElementById('timer').textContent = time;
57
+ refresh();
58
+ }
52
59
 
60
+ var refresh = function() {
61
+ setTimeout(recalc, 1000);
62
+ }
53
63
 
54
64
  var now = new Date();
55
65
  var rest = goal.getTime() - now.getTime();
@@ -75,17 +85,6 @@
75
85
  count = [days, hours, min, sec];
76
86
  return count;
77
87
  }
78
-
79
- var recalc = function() {
80
- var count = countdown(goal);
81
- var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
82
- document.getElementById('timer').textContent = time;
83
- refresh();
84
- }
85
-
86
- var refresh = function() {
87
- setTimeout(recalc, 1000);
88
- }
89
88
  </script>
90
89
  </body>
91
90
 

2

編集

2019/01/16 10:05

投稿

Chandler_Bing
Chandler_Bing

スコア673

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,13 @@
1
1
  ネットを参考に残り時間を指定日までの残り時間を１秒ずつ表示するプログラムを作成しました。
2
- 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいのですが、どのようにすればよろしいでしょうか。特にあと１時間という情報はどうしとくすれば良いでしょうか。(Math.floor(rest / 1000 / 60 / 60) < 1 とかでしょうか)
2
+ 現在実行したい機能として、残り時間が１時間を切ったら１秒ごとの呼び出しに変更するというプログラムを作成したいです。(１時間以上ある場合はPHPのようにページの更新で残り時間が変更するようにします)
3
- 簡単なサンプルコード等あれば非常に助かります。
4
3
 
4
+ 問題❶
5
+ goalの時間を１時間未満にすると表示されない。
5
- また条件分岐はどのように行うのがこの場合は適切でしょうか。
6
+ どこが問題か教えていただけますでしょうか。
6
7
 
8
+ 問題❷
9
+ JSは本当に始めたばかりですが、このコードは不細工すぎると思うので、少し改善点を教えてください。
10
+
7
11
  ```JS
8
12
  <!doctype html>
9
13
  <html>
@@ -31,26 +35,50 @@
31
35
  <footer>JavaScript Samples</footer>
32
36
  <script>
33
37
  var countdown = function(due) {
34
- var now = new Date();
38
+ var cdnow = new Date();
35
-
36
- var rest = due.getTime() - now.getTime();
39
+ var cdrest = due.getTime() - now.getTime();
37
- var sec = Math.floor(rest / 1000) % 60;
40
+ var cdsec = Math.floor(rest / 1000) % 60;
38
- var min = Math.floor(rest / 1000 / 60) % 60;
41
+ var cdmin = Math.floor(rest / 1000 / 60) % 60;
39
- var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
42
+ var cdhours = Math.floor(rest / 1000 / 60 / 60) % 24;
40
- var days = Math.floor(rest / 1000 / 60 / 60 / 24);
43
+ var cddays = Math.floor(rest / 1000 / 60 / 60 / 24);
41
- var count = [days, hours, min, sec];
44
+ var cdcount = [days, hours, min, sec];
42
-
43
- return count;
45
+ return cdcount;
44
46
  }
45
47
 
46
48
  var goal = new Date();
47
- goal.setHours(23);
49
+ goal.setHours(22);
48
50
  goal.setMinutes(59);
49
51
  goal.setSeconds(59);
50
52
 
53
+
54
+ var now = new Date();
55
+ var rest = goal.getTime() - now.getTime();
56
+ var sec = Math.floor(rest / 1000) % 60;
57
+ var min = Math.floor(rest / 1000 / 60) % 60;
58
+ var hours = Math.floor(rest / 1000 / 60 / 60) % 24;
59
+ var days = Math.floor(rest / 1000 / 60 / 60 / 24);
60
+ var count = [days, hours, min, sec];
61
+
62
+ if (hours < 1) {
63
+ recalc();
64
+ } else {
65
+ var time = hours + '時間' + min + '分' + min + '秒';
66
+ document.getElementById('timer').textContent = time;
67
+ }
68
+
69
+ var countdown = function(due) {
70
+ rest = due.getTime() - now.getTime();
71
+ sec = Math.floor(rest / 1000) % 60;
72
+ min = Math.floor(rest / 1000 / 60) % 60;
73
+ hours = Math.floor(rest / 1000 / 60 / 60) % 24;
74
+ days = Math.floor(rest / 1000 / 60 / 60 / 24);
75
+ count = [days, hours, min, sec];
76
+ return count;
77
+ }
78
+
51
79
  var recalc = function() {
52
- var counter = countdown(goal);
80
+ var count = countdown(goal);
53
- var time = counter[1] + '時間' + counter[2] + '分' + counter[3] + '秒';
81
+ var time = count[1] + '時間' + count[2] + '分' + count[3] + '秒';
54
82
  document.getElementById('timer').textContent = time;
55
83
  refresh();
56
84
  }
@@ -58,9 +86,9 @@
58
86
  var refresh = function() {
59
87
  setTimeout(recalc, 1000);
60
88
  }
61
- recalc();
62
89
  </script>
63
90
  </body>
64
91
 
65
92
  </html>
93
+
66
94
  ```

1

追記

2019/01/15 13:31

投稿

Chandler_Bing
Chandler_Bing

スコア673

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