回答編集履歴
4
追記
answer
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
久々に作って面白いサンプルでした。
|
|
2
2
|
|
|
3
|
+
[動くサンプル](https://jsfiddle.net/shibuya/6umo8y7m/3/)
|
|
4
|
+
|
|
3
5
|
```html
|
|
4
6
|
<!DOCTYPE HTML>
|
|
5
7
|
<html lang="ja">
|
3
修正
answer
CHANGED
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
animation:blink 0.25s ease-in-out infinite alternate;
|
|
41
41
|
}
|
|
42
42
|
@keyframes blink {
|
|
43
|
-
0% { background-color: rgba(0, 0, 255, 0); }
|
|
43
|
+
0% { background-color: rgba(0, 0, 255, 0.2); }
|
|
44
|
-
45%{ background-color: rgba(0, 0, 255,
|
|
44
|
+
45%{ background-color: rgba(0, 0, 255, 1); }
|
|
45
45
|
}
|
|
46
46
|
@-webkit-keyframes blink {
|
|
47
|
-
0% { background-color: rgba(0, 0, 255, 0); }
|
|
47
|
+
0% { background-color: rgba(0, 0, 255, 0.2); }
|
|
48
|
-
45%{ background-color: rgba(0, 0, 255,
|
|
48
|
+
45%{ background-color: rgba(0, 0, 255, 1); }
|
|
49
49
|
}
|
|
50
50
|
</style>
|
|
51
51
|
</head>
|
2
修正
answer
CHANGED
|
@@ -55,11 +55,6 @@
|
|
|
55
55
|
<span class="yellow"> </span>
|
|
56
56
|
<span class="red active"> </span>
|
|
57
57
|
</div>
|
|
58
|
-
<p>
|
|
59
|
-
<button type="button" id="start">
|
|
60
|
-
スタート
|
|
61
|
-
</button>
|
|
62
|
-
</p>
|
|
63
58
|
<script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
|
|
64
59
|
<script type="text/javascript">
|
|
65
60
|
$.wait = function (msec) {
|
1
修正
answer
CHANGED
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
|
|
80
80
|
if (light.hasClass('blue')) {
|
|
81
81
|
if (light.hasClass('blink')) {
|
|
82
|
-
light.removeClass('active')
|
|
82
|
+
light.removeClass('active').removeClass('blink')
|
|
83
83
|
.next('span').addClass('active');
|
|
84
84
|
$.wait(yellowtime).done(function () {
|
|
85
85
|
signal();
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
signal();
|
|
98
98
|
});
|
|
99
99
|
} else if (light.hasClass('red')) {
|
|
100
|
-
light.removeClass('active')
|
|
100
|
+
light.removeClass('active');
|
|
101
101
|
$('.signal > .blue').addClass('active');
|
|
102
102
|
$.wait(activetime).done(function () {
|
|
103
103
|
signal();
|