teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問ボタンを押したときに1～2秒ほどローディング画像が表示されるようにしたいのですが、、、

編集履歴

質問編集履歴

8

タグ修正

2019/03/26 05:07

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

7

文法の修正

2019/03/26 05:07

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -82,7 +82,7 @@
82
82
 
83
83
  }
84
84
 
85
- [/script]
85
+ </script>
86
86
 
87
87
 
88
88
 
@@ -120,7 +120,7 @@
120
120
 
121
121
 
122
122
 
123
- [script type="text/javascript"]
123
+ <script type="text/javascript">
124
124
 
125
125
  // ◆◆◆ファンクション名◆◆◆
126
126
 

6

誤字

2019/03/26 05:00

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -36,26 +36,96 @@
36
36
 
37
37
 
38
38
 
39
+ <script type="text/javascript">
40
+
41
+ // ◆◆◆ファンクション名◆◆◆
42
+
43
+ function keisan() {
44
+
45
+
46
+
47
+ //////////////////////////////////
48
+
49
+
50
+
51
+ この部分にどういったスクリプトを記述すれば良いかが分からない
52
+
53
+
54
+
55
+ //////////////////////////////////
56
+
57
+
58
+
59
+ // ◆◆◆入力された（anser）の定義◆◆◆
60
+
61
+ var anser1 = (document.querySelector('#anser1').value);
62
+
63
+ var anser2 = (document.querySelector('#anser2').value);
64
+
65
+ // ◆◆◆関数設定◆◆◆
66
+
67
+ var word1 = 'あいうえお';
68
+
69
+ var word2 = 'ＡＢＣＤＥＦ';
70
+
71
+ // ◆◆◆テーブル設定◆◆◆
72
+
73
+ var table1 =`<table style="width:300px;"><tbody><tr><td>`;
74
+
75
+ var table2 =`</td></tr><tr><th>`;
76
+
77
+ var table3 =`</th></tr></tbody></table>`;
78
+
79
+ // ◆◆◆結果の表示◆◆◆
80
+
81
+ document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3;
82
+
83
+ }
84
+
85
+ [/script]
86
+
87
+
88
+
89
+
90
+
91
+ ```ここに言語を入力
92
+
93
+ // html部分
94
+
95
+
96
+
97
+ <form>
98
+
99
+ <input id="anser1" type="number" placeholder="0">
100
+
101
+ <br>
102
+
103
+ <input id="anser2" type="number" placeholder="0">
104
+
105
+ <br>
106
+
107
+ <input type="button" value="結果を表示する" onclick="keisan();">
108
+
109
+ <br>
110
+
111
+ <div id="anserall" style="white-space:pre;"></div>
112
+
113
+ </form>
114
+
115
+
116
+
117
+
118
+
119
+ //ジャバスクリプト
120
+
121
+
122
+
39
123
  [script type="text/javascript"]
40
124
 
41
125
  // ◆◆◆ファンクション名◆◆◆
42
126
 
43
127
  function keisan() {
44
128
 
45
-
46
-
47
- //////////////////////////////////
48
-
49
-
50
-
51
- この部分にどういったスクリプトを記述すれば良いかが分からない
52
-
53
-
54
-
55
- //////////////////////////////////
56
-
57
-
58
-
59
129
  // ◆◆◆入力された（anser）の定義◆◆◆
60
130
 
61
131
  var anser1 = (document.querySelector('#anser1').value);
@@ -82,77 +152,7 @@
82
152
 
83
153
  }
84
154
 
85
- [/script]
86
-
87
-
88
-
89
-
90
-
91
- ```ここに言語を入力
92
-
93
- // html部分
94
-
95
-
96
-
97
- <form>
98
-
99
- <input id="anser1" type="number" placeholder="0">
100
-
101
- <br>
102
-
103
- <input id="anser2" type="number" placeholder="0">
104
-
105
- <br>
106
-
107
- <input type="button" value="結果を表示する" onclick="keisan();">
108
-
109
- <br>
110
-
111
- <div id="anserall" style="white-space:pre;"></div>
112
-
113
- </form>
155
+ </script>
114
-
115
-
116
-
117
-
118
-
119
- //ジャバスクリプト
120
-
121
-
122
-
123
- [script type="text/javascript"]
124
-
125
- // ◆◆◆ファンクション名◆◆◆
126
-
127
- function keisan() {
128
-
129
- // ◆◆◆入力された（anser）の定義◆◆◆
130
-
131
- var anser1 = (document.querySelector('#anser1').value);
132
-
133
- var anser2 = (document.querySelector('#anser2').value);
134
-
135
- // ◆◆◆関数設定◆◆◆
136
-
137
- var word1 = 'あいうえお';
138
-
139
- var word2 = 'ＡＢＣＤＥＦ';
140
-
141
- // ◆◆◆テーブル設定◆◆◆
142
-
143
- var table1 =`<table style="width:300px;"><tbody><tr><td>`;
144
-
145
- var table2 =`</td></tr><tr><th>`;
146
-
147
- var table3 =`</th></tr></tbody></table>`;
148
-
149
- // ◆◆◆結果の表示◆◆◆
150
-
151
- document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3;
152
-
153
- }
154
-
155
- [/script]
156
156
 
157
157
 
158
158
 

5

文法の修正

2019/03/26 04:59

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -10,16 +10,22 @@
10
10
 
11
11
 
12
12
 
13
+ /////////////////////////////////////////////////
14
+
15
+ 参考にしたサイト（２つ）
16
+
17
+
18
+
13
19
  http://blue-bear.jp/kb/javascript-%E5%87%A6%E7%90%86%E4%B8%AD%E3%81%AB%E3%83%AD%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%97%E3%81%A6%E3%80%81%E5%87%A6/?fbclid=IwAR3iay0oWIptezzx3XWdbEPmCq2Uj02k9RNLiLRLVm-aTos1gZJsbgtDshs
14
20
 
15
21
 
16
22
 
17
-
18
-
19
23
  https://haniwaman.com/loading/?fbclid=IwAR0g5WSlyiEEb-fHzPBHdfqbpcrMUebDUrgKtvZycf6oL1ljkT85zD07hiQ
20
24
 
21
25
 
22
26
 
27
+ /////////////////////////////////////////////////
28
+
23
29
 
24
30
 
25
31
 

4

文法の修正

2019/03/26 04:56

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -22,6 +22,14 @@
22
22
 
23
23
 
24
24
 
25
+
26
+
27
+ ローディング画像はCSSでつくったので、あとはボタンを押せば、ローディング画像が表示されるように、ジャバスクリプトを記述すれば良いだけだと思うのですが、どういった記述をすれば良いかが分かりません。
28
+
29
+
30
+
31
+
32
+
25
33
  [script type="text/javascript"]
26
34
 
27
35
  // ◆◆◆ファンクション名◆◆◆

3

文法の修正

2019/03/26 04:55

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -17,6 +17,58 @@
17
17
 
18
18
 
19
19
  https://haniwaman.com/loading/?fbclid=IwAR0g5WSlyiEEb-fHzPBHdfqbpcrMUebDUrgKtvZycf6oL1ljkT85zD07hiQ
20
+
21
+
22
+
23
+
24
+
25
+ [script type="text/javascript"]
26
+
27
+ // ◆◆◆ファンクション名◆◆◆
28
+
29
+ function keisan() {
30
+
31
+
32
+
33
+ //////////////////////////////////
34
+
35
+
36
+
37
+ この部分にどういったスクリプトを記述すれば良いかが分からない
38
+
39
+
40
+
41
+ //////////////////////////////////
42
+
43
+
44
+
45
+ // ◆◆◆入力された（anser）の定義◆◆◆
46
+
47
+ var anser1 = (document.querySelector('#anser1').value);
48
+
49
+ var anser2 = (document.querySelector('#anser2').value);
50
+
51
+ // ◆◆◆関数設定◆◆◆
52
+
53
+ var word1 = 'あいうえお';
54
+
55
+ var word2 = 'ＡＢＣＤＥＦ';
56
+
57
+ // ◆◆◆テーブル設定◆◆◆
58
+
59
+ var table1 =`<table style="width:300px;"><tbody><tr><td>`;
60
+
61
+ var table2 =`</td></tr><tr><th>`;
62
+
63
+ var table3 =`</th></tr></tbody></table>`;
64
+
65
+ // ◆◆◆結果の表示◆◆◆
66
+
67
+ document.querySelector('#anserall').innerHTML = table1+word1+anser1+table2+word2+anser2+table3;
68
+
69
+ }
70
+
71
+ [/script]
20
72
 
21
73
 
22
74
 

2

文法の修正

2019/03/26 04:53

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,9 @@
24
24
 
25
25
  ```ここに言語を入力
26
26
 
27
- [inline]
27
+ // html部分
28
+
29
+
28
30
 
29
31
  <form>
30
32
 
@@ -43,6 +45,12 @@
43
45
  <div id="anserall" style="white-space:pre;"></div>
44
46
 
45
47
  </form>
48
+
49
+
50
+
51
+
52
+
53
+ //ジャバスクリプト
46
54
 
47
55
 
48
56
 
@@ -79,8 +87,6 @@
79
87
  }
80
88
 
81
89
  [/script]
82
-
83
- [/inline]
84
90
 
85
91
 
86
92
 

1

タグ修正

2019/03/26 04:51

投稿

TreesShimi
TreesShimi

スコア16

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
 
9
- 色々調べて、とりあえず下記リンクのサイトなどのやり方を参考に、あれこれやっているのですがうまくいかないのです。。。
9
+ 色々調べて、とりあえず下記リンクのサイトなどのやり方を参考に、あれこれやっているのですがローディング画像が思うように表示されないのです。。。
10
10
 
11
11
 
12
12