プログラミングで暮らしをハック
ITで暮らしを便利にするブログ
作ったアプリ紹介

【JavaScript】ブラウザで動くタイマーアプリを作りました。

ブラウザで動くカウントダウンタイマーを作りました。

ブラウザでタイマーアプリ

プログラミングの練習として「動くもの」を作りたいと思い、挑戦しました。

工夫した所は、ブラウザのタブにも、リアルタイムでタイマーが表示されるところです。違うページを閲覧していたとしても、タイマーを確認することができます。もちろん、スマホでも大丈夫です。

 

HTML

参考までにHTMLを載せておきます。タイマー表示部のdiv要素にidをつけて、制御はJavaScriptで行いました。

<div id="timer">00:00</div>
        <div id="controls">
            <div class="box">
                <button id="min">分</button>
                <button id="sec">秒</button>
            </div>
            <div class="box">
                <button id="start">スタート</button>
                <button id="reset">リセット</button>
            </div>
</div>