Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@noytdm1021(noy dmt)

【javascript・初心者用基礎】3分タイマーを作ってみよう。

Posted at

1.はじめに

当記事ではHTML/CSS,javascriptの基本的な文法を使って簡単なタイマーを作っていきます。
この記事はJavascriptを0から学び始めて1ヶ月程度で書きました。
間違っている説明や遠回りな記述があるかもしれない事を御了承お願い致します。

#2.環境
今回はソースコードエディタ・VSCodeを使っています。
今回初めて使ったのですがHTML/CSSを記述していく上で簡単に描ける機能が多かったので間違いを少なく速く書きたい方には是非、おすすめです。
JavaScriptに関しては今回ライブラリやフレームワークは使わず書いていきます。

#3.完成品
今回はタイマーでも00:00:00から数が増えていく訳ではなく、3分タイマーを作りました。
タイマーの下にある【START】ボタンを押すと...
スクリーンショット 2019-09-21 20.27.36.png
このように3:00:00から0.1秒ごとに時間が刻まれていき、ボタンの色が白色に変わります。
そしてこのまま、00:00:00になるまで刻まれていき、3分が過ぎると、、、
スクリーンショット 2019-09-21 20.27.56.png
このように3分を過ぎた分だけ赤字で時間が刻まれていきます。
この赤字のまま、1分待つと...
スクリーンショット 2019-09-21 20.31.06.png

また最初の状態に戻ります。
スクリーンショット 2019-09-21 20.27.36.png

#4.完成コード
コードを見ていただけると分かりますがjavascriptのコードはhtml内のscriptタグの中に記述しました。

timer.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="timer.css">
    <title>Timer</title>
</head>

<body>
    <h3>Timer</h3>
    <div class="content">
        <p id="timer">03:00:00</p>
    </div>
    <div class="button" id="buttonBox">
        <button id="start">
            START
        </button>
    </div>
    <script>
        var point;
        var sec;
        var seconds;
        var min;
        var hour;
        var start;
        var now;
        var time;
        var id;

        document.getElementById('start').addEventListener('click', function () {
            if (document.getElementById('start').innerHTML === 'START') {
                start = new Date();
                id = setInterval(goTimer, 10);
                document.getElementById('start').innerHTML = 'STOP';

                document.getElementById('buttonBox').classList.remove('button');
                document.getElementById('buttonBox').classList.add('buttonbutton');
            } else {
                clearInterval(id);
                document.getElementById('start').innerHTML = 'START';
                document.getElementById('timer').innerHTML = '03:00:00';

                document.getElementById('buttonBox').classList.remove('buttonbutton');
                document.getElementById('buttonBox').classList.add('button');
            }
        });

        var goTimer = function () {
            now = new Date();
            time = now.getTime() - start.getTime();

            point = Math.floor(time / 100);
            sec = Math.floor(time / 1000);
            min = Math.floor(sec / 60);
            hour = Math.floor(min / 60);
            seconds = Math.floor(time / 1000);

            if (seconds < 180) {
                point = 9 - (point - sec * 10);
                sec = 59 - (sec - min * 60);
                min = 2 - (min - hour * 60);

                point = addZero(point);
                sec = addZero(sec);
                min = addZero(min);

                document.getElementById('timer').innerHTML = min + ':' + sec + ':' + point;
            } else if (seconds >= 180 && seconds < 240) {
                point = point - sec * 10;
                sec = sec - min * 60;
                min = min - 3;

                point = addZero(point);
                sec = addZero(sec);
                min = addZero(min);

                document.getElementById('timer').style.color = 'red';
                document.getElementById('timer').innerHTML = min + ':' + sec + ':' + point;

            } else {
                clearInterval(id);
                document.getElementById('timer').innerHTML = '03:00:00';
                document.getElementById('timer').style.color = 'white';
                document.getElementById('start').innerHTML = 'START';

                document.getElementById('buttonBox').classList.remove('buttonbutton');
                document.getElementById('buttonBox').classList.add('button');
            }

        }

        var addZero = function (value) {
            if (value < 10) {
                value = '0' + value;
            }
            return value;
        }
    </script>
</body>

</html>
timer.css
body{
    background-color: rgb(223, 217, 217);
}
h3{
    width:300px;
    text-align: center;
    padding:10px;
    margin:70px auto 50px;
    background-color: rgba(255,255,255,.7);
    border-radius: 5px;
}
.content {
    background-color: black;
    color:white;
    width:350px;
    margin:0 auto 30px;
    padding:15px;
    text-align: center;
    font-size:30px;
}
.content p{
    margin:0;
    padding:0;
}

.button{/* div class="button"の時のレイアウト　*/
width:100%;
text-align: center;
}

.buttonbutton{/* div class="buttonbutton"の時のレイアウト　*/
    width:100%;
text-align: center;
}

button button{/* div class="button"の時のレイアウト　*/
    border:none;
    width: 80px;
    padding:10px 0 10px 0;
    border-radius: 6px;
    color:white;
    background-color: rgba(2, 61, 255, .8);
    box-shadow:3px 3px 6px rgba(0,0,0,.4);
}

.buttonbutton button{/* div class="buttonbutton"の時のレイアウト　*/
    border:none;
    width: 80px;
    padding:10px 0 10px 0;
    border-radius: 6px;
    color:black;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow:3px 3px 6px rgba(0,0,0,.4);
}

#5.コードの構成
下記、コードは見た目部分です。
javascriptで動きを付ける際にはdivタグのクラス名の他にidを付ける事を心掛けます。
html内の特定の要素にjavascriptを使って動きを付けるのですが、【どの要素に】動きを付けるのかidタグを使って区別するからです。

timer.html
<body>
    <h3>Timer</h3>
    <div class="content">
        <p id="timer">03:00:00</p><!--時間を刻んでいくのでid名をtimerとします。-->
    </div>
    <div class="button" id="buttonBox"><!--ボタンの背景色を変える為、idをbuttonboxにします-->
        <button id="start"><!--ボタンを押すと文字がSTARTからSTOPにするようにidをstartとします。-->
            START
        </button>
    </div>
</body>

次はjavascriptのコードです。
上記で述べさせて頂きましたが対象となる要素のid名を指定してjavascriptで動きを書いていきます。

timer.html

    <script>
        var point;
        var sec;
        var seconds;
        var min;
        var hour;
        var start;
        var now;
        var time;
        var id;

        document.getElementById('start').addEventListener('click', function () {
/*document.getElementById('id名')で対象要素を指定し、その後に処理を付け加えます。
上記のaddEventListener('click',function(){処理})で対象をクリックした時に処理を
行うように指定できます。*/

            if (document.getElementById('start').innerHTML === 'START') {
/*ここでdocument.getElementById('start').innerHTMLと記述する事でid:startを
持つ要素の中身を指定しています。つまりここでは「id名がstartのタグの中身がSTARTの場合、
trueにするよ」と言っています*/
                start = new Date();
                id = setInterval(goTimer, 10);
/*上記のsetIntervalは一定時間ごとに処理を実行するメソッドです。
第二引数の10で10ミリ秒ごとにgoTimerメソッドを実行しています。
goTimerの処理内容は後で説明します*/
             document.getElementById('start').innerHTML = 'STOP';
/*ここでSTARTボタンをクリックしたのでSTARTの文字をSTOPに書き換えています。
addEventListener('click',function(){処理}のなかで書いているので
STARTボタンを押したらボタンの文字がSTARTからSTOPに変わるように指定しました。*/
             document.getElementById('buttonBox').classList.remove('button');
/*id名でタグを指定した後にclassList.removeを書くとクラス名を消すことができます。 
そして下記のclassList.addを書くことで新しいクラス名を指定してあげる事ができます。
何故ここでクラス名を変えるのかというとTimer.cssを見ていただきたいのですがセレクタ名が「button」の時と
「buttonbutton」の時で文字色と背景色が変わるようにしています。*/ 
            document.getElementById('buttonBox').classList.add('buttonbutton');

            } else {
                clearInterval(id);
/*STOPボタンを押すとclearIntervalで変数idに予め入れたsetIntervalメソッドの処理を止めています*/
                document.getElementById('start').innerHTML = 'START';
                document.getElementById('timer').innerHTML = '03:00:00';

                document.getElementById('buttonBox').classList.remove('buttonbutton');
                document.getElementById('buttonBox').classList.add('button');
            }
        });

        var goTimer = function () {
            now = new Date();
            time = now.getTime() - start.getTime();
/*変数nowのgetTimeはsetIntervalによって時間が更新されていきますが、
変数startのgetTimeはSTARTボタンを押した時に宣言されているのでボタンが押された時間から変わることは
ありません。この二つの差分を取ることでボタンを押してからの経過時間を取得する事ができます*/

            point = Math.floor(time / 100);/*Math.floorは絶対値を表します。
差分を100で割る事でここでは0.1秒毎の経過時間を取得。*/
            sec = Math.floor(time / 1000);/*1秒毎の時間を取得*/
            min = Math.floor(sec / 60);/*1分毎の時間を取得*/
            hour = Math.floor(min / 60);/*1時間毎の時間を取得*/
            seconds = Math.floor(time / 1000);/*1秒毎の時間を取得*/

            if (seconds < 180) {/*3分経過するまで*/
                point = 9 - (point - sec * 10);
                /*9から時間差分引かれカウントダウンのように
                表示されていきます。以下同じなので省略します。*/
                sec = 59 - (sec - min * 60);
                min = 2 - (min - hour * 60);

                point = addZero(point);
              /*addZeroメソッドは下記に定義していますが
　　　　　　　　　変数point,sec,minのそれぞれが10未満の時
　　　　　　　　　0を前に付けます。（例：５→05）*/
                sec = addZero(sec);
                min = addZero(min);

                document.getElementById('timer').innerHTML = min + ':' + sec + ':' + point;
            } else if (seconds >= 180 && seconds < 240) {/*3分経過後*/
                point = point - sec * 10;
                sec = sec - min * 60;
                min = min - 3;

                point = addZero(point);
                sec = addZero(sec);
                min = addZero(min);

                document.getElementById('timer').style.color = 'red';
                /*style.colorでid:timerを持つ要素内の文字色を赤色に変えています*/
                document.getElementById('timer').innerHTML = min + ':' + sec + ':' + point;

            } else {
                clearInterval(id);
                document.getElementById('timer').innerHTML = '03:00:00';
                document.getElementById('timer').style.color = 'white';
                document.getElementById('start').innerHTML = 'START';

                document.getElementById('buttonBox').classList.remove('buttonbutton');
                document.getElementById('buttonBox').classList.add('button');
            }

        }

        var addZero = function (value) {
            if (value < 10) {
                value = '0' + value;
            }
            return value;
        }
    </script>

#6.最後に

最後まで見ていただきありがとうございました。
説明もわかりづらいところがたくさんあったと思いますが、
コードをコピペしてみて自分で動かして見ていただけると幸いです。

4
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
11

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?