teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問時計のように画面を、静かにリフレッシュするには？

編集履歴

質問編集履歴

7

サーバ側から返す値を追記

2018/04/03 07:09

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
  </div>
30
30
 
31
- 　<div id="new-data">
31
+ 　<div id="new-value">
32
32
 
33
33
  (ここにDBから取得した最新の値を表示)
34
34
 
@@ -48,6 +48,18 @@
48
48
 
49
49
  ```
50
50
 
51
+ ■サーバ側から返す値
52
+
53
+ json形式
54
+
55
+ data.new_value
56
+
57
+ data.get_date
58
+
59
+
60
+
61
+ ■サーバ側にPOSTする値　なし
62
+
51
63
 
52
64
 
53
65
  ■試してみたこと
@@ -60,23 +72,17 @@
60
72
 
61
73
  }
62
74
 
63
-
64
-
65
75
  window.addEventListener('load', function () {
66
76
 
67
77
  setTimeout(doReloadNoCache, 60000);
68
78
 
69
79
  console.log("update");
70
80
 
71
-
72
-
73
81
  });
74
82
 
75
83
  ```
76
84
 
77
- その結果、ブラウザ側でたしかにデジタル時計のように表示されますが、
78
-
79
- 一分ごとに、「・・・に接続しています」の表示がでます。
85
+ その結果、一分ごとに、「・・・に接続しています」の表示がでます。
80
86
 
81
87
  できればこの表示は避けたいです。
82
88
 

6

HTML修正

2018/04/03 07:09

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- やりたいこと
1
+ ■やりたいこと
2
2
 
3
3
  フォームのない画面で、定期的に（例：1分ごと）画面をリフレッシュさせたいのですが、どのような方法がよいでしょうか？
4
4
 
@@ -24,13 +24,17 @@
24
24
 
25
25
  <!-- デジタル時計のように一分毎に画面更新した日付＋時間を表示 -->
26
26
 
27
- <div>yy年m月d日 hh時㎜分に更新
27
+ <div id="now">yy年m月d日 hh時㎜分に更新
28
28
 
29
29
  </div>
30
30
 
31
- 　<div>
31
+ 　<div id="new-data">
32
32
 
33
33
  (ここにDBから取得した最新の値を表示)
34
+
35
+ </div>
36
+
37
+ 　<div id="get-date">
34
38
 
35
39
  (ここにサーバから取得した日付を表示　ただし当日日付ではなくサーバ側で計算した日付)
36
40
 
@@ -46,7 +50,7 @@
46
50
 
47
51
 
48
52
 
49
- 試してみたこと
53
+ ■試してみたこと
50
54
 
51
55
  ```JS
52
56
 

5

HTML修正　やりたいことをHTMLに記述

2018/04/03 06:58

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -31,6 +31,8 @@
31
31
  　<div>
32
32
 
33
33
  (ここにDBから取得した最新の値を表示)
34
+
35
+ (ここにサーバから取得した日付を表示　ただし当日日付ではなくサーバ側で計算した日付)
34
36
 
35
37
  </div>
36
38
 

4

HTML修正

2018/04/03 06:53

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -22,7 +22,7 @@
22
22
 
23
23
  <div id="main">
24
24
 
25
- <!-- デジタル時計のように一分毎に画面更新した時間を表示 -->
25
+ <!-- デジタル時計のように一分毎に画面更新した日付＋時間を表示 -->
26
26
 
27
27
  <div>yy年m月d日 hh時㎜分に更新
28
28
 

3

試してみたこと追記

2018/04/03 06:48

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -72,4 +72,8 @@
72
72
 
73
73
  一分ごとに、「・・・に接続しています」の表示がでます。
74
74
 
75
- よろしくお願いいたします。できればこの表示は避けたいです。
75
+ できればこの表示は避けたいです。
76
+
77
+
78
+
79
+ よろしくお願いいたします。

2

試してみたことを追記

2018/04/03 06:46

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -42,4 +42,34 @@
42
42
 
43
43
  ```
44
44
 
45
+
46
+
47
+ 試してみたこと
48
+
49
+ ```JS
50
+
51
+ function doReloadNoCache() {
52
+
53
+ window.location.reload(true);
54
+
55
+ }
56
+
57
+
58
+
59
+ window.addEventListener('load', function () {
60
+
61
+ setTimeout(doReloadNoCache, 60000);
62
+
63
+ console.log("update");
64
+
65
+
66
+
67
+ });
68
+
69
+ ```
70
+
71
+ その結果、ブラウザ側でたしかにデジタル時計のように表示されますが、
72
+
73
+ 一分ごとに、「・・・に接続しています」の表示がでます。
74
+
45
- よろしくお願いいたします
75
+ よろしくお願いいたします。できればこの表示は避けたいです。

1

やりたいことのHTMLを追加

2018/04/03 06:45

投稿

sakura-shi
sakura-shi

スコア93

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  やりたいこと
2
2
 
3
- フォームのない画面で、定期的に（例：10分ごと）画面をリフレッシュさせたいのですが、どのような方法がよいでしょうか？
3
+ フォームのない画面で、定期的に（例：1分ごと）画面をリフレッシュさせたいのですが、どのような方法がよいでしょうか？
4
4
 
5
5
  Javascriptのreloadを使うと、明らかに画面を更新しているのが目視でわかるのではないでしょうか？
6
6
 
@@ -8,4 +8,38 @@
8
8
 
9
9
 
10
10
 
11
+ 更新する画面
12
+
13
+ ```
14
+
15
+ <html>
16
+
17
+ <head>
18
+
19
+ </head>
20
+
21
+ <body>
22
+
23
+ <div id="main">
24
+
25
+ <!-- デジタル時計のように一分毎に画面更新した時間を表示 -->
26
+
27
+ <div>yy年m月d日 hh時㎜分に更新
28
+
29
+ </div>
30
+
31
+ 　<div>
32
+
33
+ (ここにDBから取得した最新の値を表示)
34
+
35
+ </div>
36
+
37
+ </div>
38
+
39
+ </body>
40
+
41
+ </html>
42
+
43
+ ```
44
+
11
45
  よろしくお願いいたします