AXY　備忘録的　技術と雑記: HTMLを動的に書き換えよう２

2017/06/27

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

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>

以下動作確認です。

アクセスすると以下の画面になります。