[JavaScript]setTimoutでカウンター処理を実装する

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、setTimeoutメソッドを使って、カウンター処理を実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

TwitterやYouTube、Facebookのアイコンは、Font Awesomeを使っています。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

補足: box-sizingプロパティについて

box-sizing」について、少し触れておきましょう。

box-sizingは、ボックスサイズの算出方法を指定する際に使用します

例えば、div要素で作成したBoxが2つあるとします。

box-sizing: content-box; を指定

box-sizing: border-box; を指定

このボックス要素には、margin、border、padding、テキストエリアの4つの領域を持ちます。box-sizingはボックスサイズを決める時、この領域の内、borderとpaddinigを含めるか否かを指定できるプロパティです。

指定できる値は、全部で3つあります。

1. content-box: paddingとborderを幅と高さに含めない(初期値)
2. border-box: paddingとborderを幅と高さに含める
3. inherit: 親要素の値を継承する

今回は、border-boxを指定しているので、paddingとborderを幅と高さに含めています。つまり、width:300px、 height:300pxの幅に指定するとボックスの大きさはそのまま横300px、縦300pxになります。

一方、content-boxを指定すると、仮にpaddingが10px、borderが5pxの幅を持っていた場合、それぞれ横315px、縦315pxのボックスサイズになります。

JavaScriptでカウンターの実装

準備ができたので、早速、JavaScriptをカウンター処理を実装しましょう。

要素の取得

JavaScriptで制御すべき要素が1つあります。最初にこの要素を取得します。

HTML属性の取得

HTMLの要素に「data-target」属性をつけているので、この要素に対して操作を行います。

HTMLに設定された属性は、getAttributeで取得できます。

「string 12000 string 5000 string 7500」とコンソールに出力されたので、属性は取得できたようですね。

ただし、全て「string」型で取得されているので、これを「number」型に変換したいと思います。

string -> numberへの型変換の方法はいくつかありますが、今回は「+」を使います。

これだけで、number型へ型変換できます。

カウント処理

次は、カウント処理を実装しましょう。

HTMLのdata-target属性は、カウンターの最大値です。この値になるまで値を増加させていきます。

const increment = target / 200の200は別の値でも構いません。この値は、カウンターの増加スピードを制御しているので、色々変えてみてください。

Math.ceil() 関数は、引数として与えた数以上の最小の整数を返します。つまり、四捨五入してくれます。

setTimeoutでループ処理

最後に、setTimeoutを使ってループ処理をしましょう。

これで完成です。

setTimeoutは、指定時間経過後に、引数に指定した関数(ここではupdateCounter)を実行します。そのため、updateCounterが実行されるたびにsetTimeoutがセットされるので、updateCounterが実行され続けます。

そして、target(最大値)を超えた時、setTimeoutはスキップされるので、タイマーが止まるという仕組みです。

おわりに

setTimeoutのループ処理は、勉強になりましたね。

setIntervalとのコンボで使う機会がありましたが、単体でもループ処理を実現できるのは目から鱗でした^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

オススメ書籍


コメントを残す