質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

5870閲覧

三秒点灯させて三秒点滅 JS

kazoogon

総合スコア281

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2016/11/03 11:49

信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわかりません。
たぶんsetTimeoutを使用するのだと思いますが、どこにどう書けばいいかわかりません/

コード<DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>信号を作る</title> <link rel="stylesheet" href="信号.css"> </head> <body> <div id="square"> <div id="red"></div> <div id="yellow"></div> <div id="blue"></div> </div> <button id="start">START</button> <button id="stop">STOP</button> <script> //スタートボタンの要素を取得してクリックしたらなんか起こるよ //クリックしたときに起こる関数。青3秒→3秒点滅→黄色2秒→赤5秒 //とりあえずボタン押したら青が3秒点灯するプログラム書きます window.onload=function(){ var start=document.getElementById('start'); start.addEventListener('click',tenmetsu,false); } function tenmetsu(){ var blue=document.getElementById('blue'); blue.style.backgroundColor='blue'; } </script> </body> </html> #square{ border:solid 1px black; width:700px; height:200px; margin: auto; position:absolute; top:0; bottom:0; left:0; right:0; } #red,#yellow,#blue{ width:150px; height:150px; border-radius:50%; border:solid 1px black; float:left; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

JavaScript

1 window.onload = function() { 2 var start = document.getElementById('start'); 3 start.addEventListener('click', changeColors, false); 4 } 5 6 function changeColors() { 7 8 var blueLight = document.getElementById('blue'); 9 var yellowLight = document.getElementById('yellow'); 10 var redLight = document.getElementById('red'); 11 12 blueLight.style.backgroundColor = 'blue'; 13 14 setTimeout(function() { 15 var intervalID = setInterval(function() { 16 // 排他的論理和を用いて透明/不透明を切り替え 17 blueLight.style.opacity ^= 1; 18 }, 300); // ↑ 無名関数を0.3秒周期で実行 19 20 setTimeout(function() { 21 // 周期実行を停止 22 clearInterval(intervalID); 23 // 不透明に戻す 24 blueLight.style.opacity = 1; 25 blueLight.style.backgroundColor = ''; 26 27 yellowLight.style.backgroundColor = 'yellow'; 28 setTimeout(function() { 29 yellowLight.style.backgroundColor = ''; 30 31 redLight.style.backgroundColor = 'red'; 32 setTimeout(function() { 33 redLight.style.backgroundColor = ''; 34 }, 5000); // ↑ 無名関数を5秒後に実行 35 }, 2000); // ↑ 無名関数を2秒後に実行 36 }, 3000); // ↑ 無名関数を3秒後に実行 37 }, 3000); // ↑ 無名関数を3秒後に実行 38 }

時間経過後関数を実行するsetTimeoutと、関数を周期実行するsetIntervalを組み合わせています。
setTimeoutのミリ秒指定が実行順序と逆方向になっているので、見にくいですが。
同じ要領で、setIntervalをもう一度使うと実際の信号のように色の変化を繰り返せますね。
信号停止もできます。

HTML

1<!DOCTYPE html>

感嘆符を忘れないように。
ちなみに青信号はgreen lightです。

投稿2016/11/03 13:44

naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2016/11/03 13:50

お返事ありがとうございます! 色々いじっててボタン押して青3秒点灯からの青点滅開始、というコードを書いたつもりですが、点滅の部分しか反応しません。 これ何がいけないのでしょうか?? <script> //青3秒点灯→3秒点滅→黄色2秒→赤5秒 //とりあえずボタン押したら青が点灯するプログラム書きます var start=document.getElementById('start'); window.onload=function(){ start.addEventListener('click',tentou,false); } function tentou(){ var blue=document.getElementById('blue'); blue.style.backgroundColor='blue'; } //ボタン押してして三秒後に点滅開始 window.onload=function(){ start.addEventListener('click',start_flash,false); setTimeout(start_flash,3000); } function start_flash(){ setInterval(tenmetsu,1000) } function tenmetsu(){ var blue=document.getElementById('blue'); if(blue.style.backgroundColor==='white'){ blue.style.backgroundColor='blue' } else{ blue.style.backgroundColor="white" } }
kazoogon

2016/11/03 13:54

このプログラム、ボタンを押さずとも点滅開始します涙 
naomi3

2016/11/03 14:12

varは宣言している関数内のみで有効です。varを使わないで変数を使用すると、グローバルな変数とみなされます。 ボタン押して青3秒点灯からの青点滅開始ならば、 start_flash内でsetTimeoutし、そこで登録した関数内でsetIntervalします。
kazoogon

2016/11/03 14:35

こうしてみましたが、青の点灯のプロセスは表示されず三秒後に青が点灯し始めます。 これがなぜかわかりません。。。 window.onload=function(){ var start=document.getElementById('start'); start.addEventListener('click',tentou,false); } function tentou(){ var blue=document.getElementById('blue'); blue.style.backgroundColor='blue'; } //ボタン押してして三秒後に点滅開始 window.onload=function(){ var start=document.getElementById('start'); start.addEventListener('click',start_flash,false); } function start_flash(){ setTimeout(wait,3000); function wait(){ setInterval(tenmetsu,500) } } function tenmetsu(){ var blue=document.getElementById('blue'); if(blue.style.backgroundColor==='blue'){ blue.style.backgroundColor='white' } else{ blue.style.backgroundColor="blue" } }
naomi3

2016/11/03 15:11

setTimeoutの前にtentou()を呼び出してください。
guest

0

久々に作って面白いサンプルでした。

動くサンプル

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>信号機サンプル</title> 6 <style type="text/css"> 7 .signal { 8 border: 1px solid #333; 9 display: inline-block; 10 padding:4px 10px; 11 border-radius: 23px; 12 background-color:white; 13 } 14 .signal > span { 15 display: inline-block; 16 opacity: 0.2; 17 width: 30px; 18 height: 30px; 19 border: 1px solid #000; 20 border-radius: 50%; 21 } 22 .signal > .blue { 23 background-color: blue; 24 } 25 .signal > .yellow { 26 background-color: yellow; 27 } 28 .signal > .red { 29 background-color: red; 30 } 31 .signal > .active { 32 opacity: 1.0; 33 } 34 .signal > .blue.active.blink { 35 -webkit-animation:blink 0.25s ease-in-out infinite alternate; 36 -moz-animation:blink 0.25s ease-in-out infinite alternate; 37 animation:blink 0.25s ease-in-out infinite alternate; 38 } 39 @keyframes blink { 40 0% { background-color: rgba(0, 0, 255, 0.2); } 41 45%{ background-color: rgba(0, 0, 255, 1); } 42 } 43 @-webkit-keyframes blink { 44 0% { background-color: rgba(0, 0, 255, 0.2); } 45 45%{ background-color: rgba(0, 0, 255, 1); } 46 } 47 </style> 48 </head> 49 <body> 50 <div class="signal"> 51 <span class="blue">&nbsp;</span> 52 <span class="yellow">&nbsp;</span> 53 <span class="red active">&nbsp;</span> 54 </div> 55 <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script> 56 <script type="text/javascript"> 57 $.wait = function (msec) { 58 var d = new $.Deferred; 59 setTimeout(function () { 60 d.resolve(msec); 61 }, msec); 62 return d.promise(); 63 }; 64 65 function signal() { 66 var activetime = 20000; 67 var blinktime = 5000; 68 var yellowtime = 3000; 69 70 var light = $('.signal > .active'); 71 72 if (light.hasClass('blue')) { 73 if (light.hasClass('blink')) { 74 light.removeClass('active').removeClass('blink') 75 .next('span').addClass('active'); 76 $.wait(yellowtime).done(function () { 77 signal(); 78 }); 79 } else { 80 light.addClass('blink'); 81 $.wait(blinktime).done(function () { 82 signal(); 83 }); 84 } 85 } else if (light.hasClass('yellow')) { 86 light.removeClass('active') 87 .next('span').addClass('active'); 88 $.wait(activetime).done(function () { 89 signal(); 90 }); 91 } else if (light.hasClass('red')) { 92 light.removeClass('active'); 93 $('.signal > .blue').addClass('active'); 94 $.wait(activetime).done(function () { 95 signal(); 96 }); 97 } 98 } 99 100 signal(); 101 </script> 102 </body> 103</html>

投稿2016/11/03 13:28

編集2016/11/03 14:51
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

tenmetsu関数の中で settimeoutで3秒待機した後 点滅すれば良いと思います。

投稿2016/11/03 12:48

potato

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問