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

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

ただいまの
回答率

91.82%

  • JavaScript

    9113questions

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

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

解決済

回答 3

投稿 2016/11/03 20:49

  • 評価
  • クリップ 1
  • VIEW 632

kazoogon

score 134

信号っぽいものを作ろうとしています。青をボタンを押してから三秒点灯させて、そこから自動的に三秒点滅させて、黄色というようにしたいのですが、三秒点灯させてから点滅させるやり方がよくわかりません。
たぶん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;
}
  • 気になる質問をクリップする

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

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/11/04 03:10

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 3

checkベストアンサー

+2

window.onload = function() {
        var start = document.getElementById('start');
        start.addEventListener('click', changeColors, false);
    }

    function changeColors() {

        var blueLight = document.getElementById('blue');
        var yellowLight = document.getElementById('yellow');
        var redLight = document.getElementById('red');

        blueLight.style.backgroundColor = 'blue';

        setTimeout(function() {
            var intervalID = setInterval(function() {
                // 排他的論理和を用いて透明/不透明を切り替え
                blueLight.style.opacity ^= 1;
            }, 300); // ↑ 無名関数を0.3秒周期で実行

            setTimeout(function() {
                // 周期実行を停止
                clearInterval(intervalID);
                // 不透明に戻す
                blueLight.style.opacity = 1;
                blueLight.style.backgroundColor = '';

                yellowLight.style.backgroundColor = 'yellow';
                setTimeout(function() {
                    yellowLight.style.backgroundColor = '';

                    redLight.style.backgroundColor = 'red';
                    setTimeout(function() {
                        redLight.style.backgroundColor = '';
                    }, 5000); // ↑ 無名関数を5秒後に実行
                }, 2000); // ↑ 無名関数を2秒後に実行
            }, 3000); // ↑ 無名関数を3秒後に実行
        }, 3000); // ↑ 無名関数を3秒後に実行
    }


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

<!DOCTYPE html>


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

投稿 2016/11/03 22:44

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2016/11/03 22: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"
    }
    }

    キャンセル

  • 2016/11/03 22:54

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

    キャンセル

  • 2016/11/03 23:12

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

    キャンセル

  • 2016/11/03 23: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"
    }
    }

    キャンセル

  • 2016/11/04 00:11

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

    キャンセル

+2

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

投稿 2016/11/03 21:48

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

+2

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

動くサンプル

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>信号機サンプル</title>
        <style type="text/css">
            .signal {
                border: 1px solid #333;
                display: inline-block;
                padding:4px 10px;
                border-radius: 23px;
                background-color:white;
            }
            .signal > span {
                display: inline-block;
                opacity: 0.2;
                width: 30px;
                height: 30px;
                border: 1px solid #000;
                border-radius: 50%;
            }
            .signal > .blue {
                background-color: blue;
            }
            .signal > .yellow {
                background-color: yellow;
            }
            .signal > .red {
                background-color: red;
            }
            .signal > .active {
                opacity: 1.0;
            }
            .signal > .blue.active.blink {
                -webkit-animation:blink 0.25s ease-in-out infinite alternate;
                -moz-animation:blink 0.25s ease-in-out infinite alternate;
                animation:blink 0.25s ease-in-out infinite alternate;
            }
            @keyframes blink {
                0% { background-color: rgba(0, 0, 255, 0.2); }
                45%{ background-color: rgba(0, 0, 255, 1); }
            }
            @-webkit-keyframes blink {
                0% { background-color: rgba(0, 0, 255, 0.2); }
                45%{ background-color: rgba(0, 0, 255, 1); }
            }
        </style>
    </head>
    <body>
        <div class="signal">
            <span class="blue">&nbsp;</span>
            <span class="yellow">&nbsp;</span>
            <span class="red active">&nbsp;</span>
        </div>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
        <script type="text/javascript">
            $.wait = function (msec) {
                var d = new $.Deferred;
                setTimeout(function () {
                    d.resolve(msec);
                }, msec);
                return d.promise();
            };

            function signal() {
                var activetime = 20000;
                var blinktime = 5000;
                var yellowtime = 3000;

                var light = $('.signal > .active');

                if (light.hasClass('blue')) {
                    if (light.hasClass('blink')) {
                        light.removeClass('active').removeClass('blink')
                                .next('span').addClass('active');
                        $.wait(yellowtime).done(function () {
                            signal();
                        });
                    } else {
                        light.addClass('blink');
                        $.wait(blinktime).done(function () {
                            signal();
                        });
                    }
                } else if (light.hasClass('yellow')) {
                    light.removeClass('active')
                            .next('span').addClass('active');
                    $.wait(activetime).done(function () {
                        signal();
                    });
                } else if (light.hasClass('red')) {
                    light.removeClass('active');
                    $('.signal > .blue').addClass('active');
                    $.wait(activetime).done(function () {
                        signal();
                    });
                }
            }

            signal();
        </script>
    </body>
</html>

投稿 2016/11/03 22:28

編集 2016/11/03 23:51

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

91.82%

関連した質問

  • 解決済

    Jquery部分作動せず 信号制作

    信号制作で クリック、青三秒点灯、青三秒点滅、からの黄色二秒点灯、最後に赤五秒点灯させたいのですがJQueryで書いた部分、青点滅終了と黄色点灯開始が反応しません。なぜでしょうか?

  • 解決済

    Javascriptで画像をランダム位置で表示させたいです。

    前提・実現したいこと Javascriptで 1.width 100%、height 600pxのdiv#contentに 2.javascriptでクリックしたらクリッ

  • 解決済

    JavaScriptでオセロの駒を表示させたい。

    お世話になります。JavaScriptを用いて、オセロの盤に駒を表示させたいと思っております。 盤自体は、for文とdocument.createElement()の組み合わせで

  • 解決済

    CSSデザイン 四角形を並べる

    やりたいこと 正方形のボタンを4つ作り、 下記画像のように並べたいです。 さらに可能ならレスポンシブにして正方形が流動的に並び変わるようになるのが理想です。 CSS

同じタグがついた質問を見る

  • JavaScript

    9113questions

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

閲覧数の多いJavaScriptの質問