2017/06/27

HTMLを動的に書き換えよう2

html動的書き換えがわかってきたので10ぴったりゲームができるタイマーを作ってみた。

以下、コードです。

innerhtml-timer.html

<!DOCTYPE html>

<html>
    <head>
        <script type="text/javascript">
            var count = 0;
            var sw = false;
            function update(){
                if(sw==true){
                    count+=1;
                    let text = count;
                    if(count==10){
                        text = "<b>!" + text + "!</b>"
                    }
                    document.getElementById("timerlabel").innerHTML = text;
                    setTimeout(update, 1000);
                }
            }
            function OnOff(){
                i=0
                if(sw==false){
                    sw=true;
                    i=1;
                    document.getElementById("OnOff").innerText = "ストップ";
                    update();
                }
                else{
                    if(i==0){
                        sw=false;
                        document.getElementById("OnOff").innerText = "スタート";
                    }
                }
            }
        </script>
    </head>
    <body>
        <div style="text-align:center">
            <div id="div1">
                <label id="timerlabel" style="font-size:40px;">
                    0
                </label>
            </div>
            <button type="button" id="OnOff" onclick="OnOff();" 
                style="font-size:40px;" >
                スタート
            </button>
        </div>
    </body>
</html>

以下動作確認です。

アクセスすると以下の画面になります。
「スタート」を押すとボタンの表示が「ストップ」に変わって、
カウントアップが始まります。

10秒ちょうどになると前後に!がついて太文字になります。

10秒を過ぎると表示パターンが元に戻ります。

以上。ご参考まで

0 件のコメント:

コメントを投稿

AWSに手を出してフレームワークも使ってみたが・・・。

サイトを作り直しました。 AWS上に構築した Content created by AXY を作り直しました。 具体的にはbottle.pyを使ったpythonで構築したサイトからPHP7を使用したサイトに再構築しています。 特別何か問題点があったというわけで...