回答編集履歴
4
メソッド修正
test
CHANGED
@@ -128,7 +128,7 @@
|
|
128
128
|
|
129
129
|
|
130
130
|
|
131
|
-
this.area.append(image);
|
131
|
+
this.area.appendChild(image);
|
132
132
|
|
133
133
|
}
|
134
134
|
|
3
コードの修正
test
CHANGED
@@ -80,17 +80,7 @@
|
|
80
80
|
|
81
81
|
|
82
82
|
|
83
|
-
this.setAreaSize();
|
84
|
-
|
85
83
|
this.bindEvent();
|
86
|
-
|
87
|
-
}
|
88
|
-
|
89
|
-
setAreaSize() {
|
90
|
-
|
91
|
-
this.width = this.area.clientWidth;
|
92
|
-
|
93
|
-
this.height = this.area.clientHeight;
|
94
84
|
|
95
85
|
}
|
96
86
|
|
@@ -99,16 +89,6 @@
|
|
99
89
|
this.area.addEventListener('click', () => {
|
100
90
|
|
101
91
|
this.displayImage();
|
102
|
-
|
103
|
-
});
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
// リサイズした場合にareaの幅・高さの数値を更新する
|
108
|
-
|
109
|
-
this.area.addEventListener('resize', () => {
|
110
|
-
|
111
|
-
this.setAreaSize();
|
112
92
|
|
113
93
|
});
|
114
94
|
|
@@ -124,15 +104,17 @@
|
|
124
104
|
|
125
105
|
const image = document.createElement('img'),
|
126
106
|
|
107
|
+
{ clientWidth, clientHeight } = this.area,
|
108
|
+
|
127
|
-
{
|
109
|
+
{ imageWidth, imageHeight } = this,
|
128
110
|
|
129
111
|
/* topの範囲は 0 ~ (areaの高さ - ランダム表示する画像の高さ)*/
|
130
112
|
|
131
|
-
top = this.getRandomInt(0,
|
113
|
+
top = this.getRandomInt(0, clientHeight - imageHeight),
|
132
114
|
|
133
115
|
/* leftの範囲は 0 ~ (areaの幅 - ランダム表示する画像の幅)*/
|
134
116
|
|
135
|
-
left = this.getRandomInt(0,
|
117
|
+
left = this.getRandomInt(0, clientWidth - imageWidth);
|
136
118
|
|
137
119
|
|
138
120
|
|
2
参考リンク追加
test
CHANGED
@@ -11,6 +11,10 @@
|
|
11
11
|
- ランダムな数値を返す関数は1つでよい(引数の使い方で最小値、最大値を指定できる)
|
12
12
|
|
13
13
|
- 位置の範囲はareaの幅・高さから画像の幅・高さをそれぞれ引く必要がある。
|
14
|
+
|
15
|
+
|
16
|
+
|
17
|
+
参考:[Math.random()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random)(ここに掲載されているmin から max までの乱整数を返す関数をそのまま流用しています)
|
14
18
|
|
15
19
|
|
16
20
|
|
1
シンタックスハイライト
test
CHANGED
@@ -60,7 +60,7 @@
|
|
60
60
|
|
61
61
|
|
62
62
|
|
63
|
-
```js
|
63
|
+
```javascript
|
64
64
|
|
65
65
|
class RandomImg {
|
66
66
|
|