回答編集履歴
7
variables
test
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
// msg = new Array();
|
|
6
6
|
// msg[0] = "JavaScript スタイルシートサンプル集"; //点滅させる文字列
|
|
7
7
|
// msg[1] = " "; //空白の文字列
|
|
8
|
-
flag = true;
|
|
8
|
+
let flag = true;
|
|
9
|
-
timer = 1500; //メッセージの変わる速度（単位は千分の一秒）
|
|
9
|
+
let timer = 1500; //メッセージの変わる速度（単位は千分の一秒）
|
|
10
10
|
window.onload = tenmetu; //ページを読み込んだ時 tenmetu を実行
|
|
11
11
|
|
|
12
12
|
function tenmetu() {
|
6
transition
test
CHANGED
|
@@ -39,3 +39,14 @@
|
|
|
39
39
|
// これだけ！
|
|
40
40
|
document.getElementById("BOX").style.opacity = flag ? 1 : 0;
|
|
41
41
|
```
|
|
42
|
+
|
|
43
|
+
### ゆっくりふんわり点滅
|
|
44
|
+
cssにtransitionをつければゆっくりふんわり点滅してくれます。
|
|
45
|
+
```css
|
|
46
|
+
#BOX {
|
|
47
|
+
font-size: 24px;
|
|
48
|
+
font-weight: bold;
|
|
49
|
+
color: #008000;
|
|
50
|
+
transition: opacity 1.5s linear; /* ゆっくり点滅 */
|
|
51
|
+
}
|
|
52
|
+
```
|
5
typo
test
CHANGED
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
`flag ? 1 : 0`の部分は、三項演算子と呼ばれる記述方法で、if文を1行で書けちゃいます。
|
|
24
24
|
|
|
25
25
|
```javascript
|
|
26
|
-
// if文の場合、変数を用意してお
|
|
26
|
+
// if文の場合、変数を用意しておく必要がある
|
|
27
27
|
let opacity = 1
|
|
28
28
|
|
|
29
29
|
// if文で値を書き換えて
|
4
opacity
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
文字列の有無じゃなくて、`opacity`を`1`<->`0`で切り替えるのはどうでしょうか？
|
|
1
|
+
文字列の有無じゃなくて、`opacity`（透明度）を、`1` <-> `0`（100% <-> 0%）で切り替えるのはどうでしょうか？
|
|
2
2
|
|
|
3
3
|
### コード例
|
|
4
4
|
```javascript
|
3
add code
test
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
文字列の有無じゃなくて、`opacity`を`1`<->`0`で切り替えるのはどうでしょうか？
|
|
2
2
|
|
|
3
|
+
### コード例
|
|
3
4
|
```javascript
|
|
4
5
|
// msg = new Array();
|
|
5
6
|
// msg[0] = "JavaScript スタイルシートサンプル集"; //点滅させる文字列
|
|
@@ -34,3 +35,7 @@
|
|
|
34
35
|
```
|
|
35
36
|
|
|
36
37
|
ifですると4行かかる処理が、三項演算子だと全部で1行ですみます。
|
|
38
|
+
```javascript
|
|
39
|
+
// これだけ！
|
|
40
|
+
document.getElementById("BOX").style.opacity = flag ? 1 : 0;
|
|
41
|
+
```
|
2
typo
test
CHANGED
|
@@ -33,4 +33,4 @@
|
|
|
33
33
|
document.getElementById("BOX").style.opacity = opacity
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
ifですると4行かかる
|
|
36
|
+
ifですると4行かかる処理が、三項演算子だと全部で1行ですみます。
|
1
ternary operator
test
CHANGED
|
@@ -17,3 +17,20 @@
|
|
|
17
17
|
setTimeout("tenmetu()", timer); //指定された時間後(ミリ秒)に関数を実行します
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
|
+
|
|
21
|
+
### 三項演算子について
|
|
22
|
+
`flag ? 1 : 0`の部分は、三項演算子と呼ばれる記述方法で、if文を1行で書けちゃいます。
|
|
23
|
+
|
|
24
|
+
```javascript
|
|
25
|
+
// if文の場合、変数を用意しておかない解けない
|
|
26
|
+
let opacity = 1
|
|
27
|
+
|
|
28
|
+
// if文で値を書き換えて
|
|
29
|
+
if (flag) { opacity = 1}
|
|
30
|
+
else { opacity = 0 }
|
|
31
|
+
|
|
32
|
+
// 代入
|
|
33
|
+
document.getElementById("BOX").style.opacity = opacity
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
ifですると4行かかるのが、三項演算子だと全部で2行ですみます。
|