以前の記事でプラグインによるカウントダウンタイマーを比較してみましたが、今回はテキストによって実装してみます。
本来、ノーコードで行きたいところなのですが、そればかりを求めると結果的にプラグインに頼りすぎてしまいます。
ここではテキストベースのカウントダウンタイマーを自分のサイトに埋め込み、表示させる方法を解説します。
ネット上には、ブラウザに希望日などを入力後、コードを吐き出しカウントダウンタイマーを実装できるサービスがいくつかあります。
それらを利用してカウントダウンタイマーを利用することができます。
サービスのいくつかをご紹介します。
カウントダウンタイマーNEO
希望日時を指定し、見た目やメッセージなどを指定できます。日にちまで、時間までなど表示する項目を指定できるほか、フォントや色、大きさも変更可能。設定後にコードが吐き出されるので、それをコピペすればOK。カウントダウン終了後は指定のコメントを表示させるか、カウントアップが選択できます。
ToolStock
シンプルなテキストベースのカウントダウンタイマーを生成できます。希望日時を指定し、見た目やメッセージなどを指定できます。日にちまで、時間までなど表示する項目を指定できるほか、。フォントはツール上では指定できませんが、大きさや行間、背景色などを指定できます。設定後にコードが吐き出されるので、それをコピペすればOK。カウントダウン終了後は指定のコメントを表示させるか、カウント停止、ループが選択できます。
ウェブツールを使ったカウントダウンタイマーの実装について
ウェブ上で生成されるカウントダウンタイマーの利用は、とても簡単で便利ですが、中には小さくリンクが入る場合や細かいカスタマイズがしにくいなどのデメリットもあります。
次はJavaScriptを取り入れたカウントダウンタイマーの実装方法を解説します。
JavaScriptを使ってカウントダウンタイマーを表示させる
htmlを書く
まず初めにカウントダウンタイマーのhtmlコードは以下です。コピペして、ワードプレスのブロックエディタやElementorにおいても「カスタムHTML」など、コードを直で入れられるブロックに入れこめば大丈夫です。
<span id="countdown"></span>
JavaScriptのコード
const target = new Date("2050/12/31 23:59:59");
const message = "終了しました。"
const elmid = document.getElementById( "countdown" );
const timer = setInterval(function() {
const now = new Date();
const diff = target - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
const miliseconds = diff < 0 ? 0 :Math.floor( diff % 1000);
elmid.innerHTML = `${ days }日${ String( hours ).padStart( 2, "0" ) }時間${ String( minutes ).padStart( 2, "0" ) }分${ String( seconds ).padStart( 2, "0" ) }.${ String( miliseconds ).padStart( 3, "0" ) }秒`;
if (diff < 0) {
clearInterval(timer);
elmid.innerHTML = message;
}
}, 1);
上記のコードは、桁数を合わせるため、桁数が足りなければ0を足すようになっています。
変更する場所は、
1行目でカウントダウンタイマーを回すまでの日にち
2行目でカウント終了後に表示させるメッセージ
です。
挿入する方法はページ内に「カスタムHTML」で挿入すれば動くはずです。
こちらの良いところは、スタイルシートによる細かい装飾が可能なところです。
例えば、
<div id="countdown" class="xxx"></span>
このようにDIV要素にして、別にクラスを与えてもいいので、より自分好みの装飾ができます。
応用編）疑似ミリ秒だけを表示させる
例えば、プラグインやElementorProの「カウントダウンタイマー」ウィジェットでは、ミリ秒を表示させる機能がない場合もあります。
そういう場合は、プラグイン側で表示させるタイマーとテキスト表示のミリ秒を組み合わせて表示させることも可能です。
エバーグリーンタイマーなどでは、ミリ秒は正しい数字にはならないかもしれませんが、そもそもミリ秒を正しく目視もできないので「なんとなく回っている」という演出で良ければ問題はないと思います。
プラグインと組み合わせるなら
・リダイレクトもできて
・エバーグリーンタイマーもできて
・ミリ秒も表示されている
という状態が可能になります。
詳しい方法とデモページはこちら↓
コメント