PR

Web上で動作するJavaScriptカウントダウンタイマを作りました

フロントエンド

表示した瞬間から指定日までのカウントダウンタイマ作りたいです
JavaScriptで作りましたがページ更新したり再起動するとタイマがリセットされます…
あとカウントが0になったら別ページに飛ばしてほしいです。

このような依頼をいただき、LocalStorageを用いた処理を提案しました。

この動作で問題ないということで、既存HTMLコードに処理を追加をさせていただきました。

制作した3日間のカウントダウンタイマはこちら(※0になって別ページに飛ばす処理は未実装)

試しに下に設けたボタンでページをリロードするか、ブラウザを閉じてもう一度このページを見てみてください。
タイマはリセットされずに時間が経過したままのはずです。

姫野秀徳

組み込みエンジニアとしてメーカー勤務10年。
第二種電工事士、基本情報技術者、Code.org認定教師。
microbitを用いた電子工作&プログラミング教室を開校。
組み込み開発の実際を発信するyoutube活動も行う。

無料で学べる組み込み開発オンラインスクールはじめました!
https://kumicla.tatepro.com

姫野秀徳をフォローする

プログラムソースコード提供中!

本ブログ記事のプログラムソースコードは下記にて提供しています。

HTML/CSS/JavaScriptの学習用にどうぞ。

提供しているプログラムには3日後にページ自動遷移する処理も入っています。

webタイマ(実績9件) | 立科プログラミング powered by BASE
...

改造依頼のメールをいただき、機能追加版も提供はじめました。

Webタイマ2 | 立科プログラミング powered by BASE
...

自分で勉強するならこちらをどうぞ
ステップアップJavaScript フロントエンド開発の初級から中級へ進むために

カウント終了時刻を保存、取得(Local Storage / Cookie)

このページを初めて開いた瞬間にカウントダウン終了の指定時刻を保存させておき、1秒おきに現在時刻をDate関数で取得して、保存した値との差分を計算してタイマに表示させています。

値の保存にはLocal Storageを用いました。

当初Cookieで試みたのですが、近くCookieを廃止しようとGoogleが躍起になっていると耳にしたのでLocal Storageの採用に至りました。

前置きが長くなりました、話を進めましょう。

Local Storage

Local StorageはCookieに似ていますが、取り扱いが非常に楽!

明示的に削除しない限りデータが消えることもなく、さらにサーバとの通信を必要としないことから情報漏洩等にも強い利点があります。

書込み

Local Storageへの書き込みは下記のように書きます。

localStorage.setItem('test', 10);

書き込みはCookieと似ていますね。キーと値を入れるだけです。

読出し

Local Storageが便利なのは読み出しの時で、変数に対してキーを指定してgetItemを書きます。

num = localStorage.getItem("test");

これだけです、とっても便利!

明示的に消さない限り、残り続けるのも管理が楽ですね(大変ともいえる)。

データ有効範囲

LocalStoraegは同一ドメイン内が有効範囲です。
このサイトで言えば、tatepro.comドメイン下のすべてのページに適用されます。

Cookie

書込み

Cookieへの書き込みは下記のように書きます。

document.cookie = "test=10";

document.cookieに対して保存するときの形式は”key=value”で表し、宣言したkeyに対してvalueを格納します。

保持期限の設定

cookieには保持期限があり、期限についてはexpiresで設定可能です。

document.cookie = "test=10";"expires=GMTString";

このとき、期限の指定はグリニッジ標準時間にしなければならないことに注意します。

簡単に行うにはDateで現時点の時刻を取得して、指定時間分足しこみます。

ミリ秒単位なので、例えば1日だと24(h)*60(m)*60(s)*1000(s→ms)となりますね。

Cookieの取得については、キーを検索して、そこから指定文字分(よく;前までとされる)抜き出して変数に格納するのですが、説明するよりコード見た方が早いので載せときます。
Cookieの取得は文字列になるので、最後にDate型に変換してます。

var cook; //cookieデータを格納する変数
var cStart2,cEnd2; //訪問回数部分を切取る為の位置を格納
var endtime; //経過時間を格納

cook=document.cookie + ";"; //変数cookにcookieデータを入れる
cEnd2 = cook.indexOf(";", cStart2);    //カウントデータの最後の部分「;」の位置を取得
endtime = cook.substring(cStart2 + 5, cEnd2);    //数値の部分だけを切り取る
endtime = Date.parse(endtime); 

カウント終了後に別ページに飛ばす

別ページに飛ばすのは、下記のようになります。

function(){window.location.href = "https://tatepro.com/";}

hrefで遷移先URLを指定することで、そこに飛びます。

例えばボタンで飛ぶ場合は直ちに実行してよいですが、タイマ動作の場合は多少の待機時間を設けるとユーザーには親切な動作になりますね。

この場合、setTimeout関数で、[処理,実行までの待機時間]を引数にします。

setTimeout(function(){window.location.href = "https://tatepro.com/";}, 5000);

5秒後にヤフーに飛ばす、ということになりますね。

まとめ

・3日間のカウントダウンタイマを作成しました
・カウントダウン時刻の保存はLocalStorageを用いました。
 Cookieでもよかったのですが、LocalStorageの方が扱いやすいので採用

今回紹介したプログラムソースコードを提供しています。

webタイマ(実績9件) | 立科プログラミング powered by BASE
...

読んだけどよく分からない、こういう風に作ってほしいなどあれば以下のフォームからメッセージくださいませ。
確認のうえ、返信いたします!

この内容が良いと思ったら、いいね💖を押して教えてください!

組みクラ – 組み込み開発を学び、未来を創るエンジニアへ
無料で学べる!組み込み開発の基礎から応用までをマスターできるオンラインスクール「組みクラ」

組み込みエンジニアは、あらゆる産業の基盤を支える重要な職業です。
私たちタテプロは、次世代の組み込みエンジニアを育成し、業界の競争力を高めるために活動しています。
あなたも、無料で学べる「組みクラ」で、組み込み開発のスキルをしっかり身につけ、キャリアを加速させましょう!
今すぐ学び始めて、将来の自分をステップアップさせる第一歩を踏み出しませんか?

\立プロとLINEで友だちになりませんか/
立プロと友だちになる
フロントエンド
シェアしていただけると嬉しいです!
タイトルとURLをコピーしました