信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわかりません。
たぶん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; }
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/03 13:50
2016/11/03 13:54
2016/11/03 14:12
2016/11/03 14:35
2016/11/03 15:11