カウントダウンタイマーをウェブツールとJavaScriptで実装する方法は以下の記事で解説をしました。
この方法を組み合わせて、Elementorのカウントダウンウィジェットやそのほかのプラグイン、ハリータイマーなどと組み合わせて、ミリ秒も表示させてみます。
こちらの記事で検証をしていますが、今のところミリ秒まで表示させるカウントダウンタイマーが見つかっていません。
したがって、どうしてもミリ秒まで表示させたければ、なんとなく回っているように見える疑似ミリ秒と組み合わせてそれっぽく見せる方法になります。
カウントダウンタイマーを多用すると、ページの表示が重くなるので複数表示したりするのはおすすめしませんが、今回の方法を駆使すると、エバーグリーンタイマーなどと組み合わせも可能ですので、より使う幅が広がります。
カウントダウンタイマープラグインとミリ秒用コードのレイアウトを作る
今回は日にち、時間、秒を左側に配置し、右側にミリ秒を表示させたいので、カラムを使って配置してみます。
本当は左が広めのカラムを使いたいところでうがないのでハーフのカラムを選択しました。（画面はElementor画面ですが、ブロックエディタの方も同じようなウィジェットがあったら代用してください）
カラムを調整して8：2くらいにします。
これらはあとで調整できるので、大体でOK
それぞれのカラムにプラグインウィジェット＆ミリ秒を配置する
左側にはカウントダウンタイマーのウィジェットを入れます。（ここではElementor proのカウントダウンタイマー）
実際の色や設定は各ウィジェット上で行ってください。
次に空いている右側に「HTMLコード」を入力できるウィジェットを追加します。
ウィジェットには以下のコードを入力しておきます。
<div id="countdown" class="count_mili"></div>
コードは絶対にDIVではないといけないというわけではありません（spanでもいいかも）。
ミリ秒表示のためのJavaScriptを書く
ページ内にミリ秒を表示させるためのJavaScriptを追加します。JavaScriptを動かすためには、さまざまの方法がありますが、とりあえず1ページにしか使わないのでれば、ページ内に「HTML」ブロックなどを用いて挿入するのが容易でしょう。
<script type="text/javascript">
//カウントダウンタイマー
const target = new Date("2050/5/05 14:35:00");
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 = `.${ String( miliseconds ).padStart( 3, "0" ) }`;
if (diff < 0) {
clearInterval(timer);
elmid.innerHTML = message;
}
}, 1);
</script>
上記の例ですと、3行目の日付はプラグインの設定と合わせます。
もし、エバーグリーンタイマーなどで合わせることが不可能で疑似ミリ秒であれば、カウントダウンタイマーを切らすことのない何十年も後の日付にしておきます。
上記の例ですと、本来ミリ秒だけなら「const」も「miliseconds」だけでいいのですが、他の要素も使うかもしれない・・という予測のもと残してあります。ただし、その分ページ読み込みが重くなる可能性もありますので、不要だと思えば「miliseconds」以外は削除しても大丈夫です。
ポイントは「elmid.innerHTML = `.${ String( miliseconds ).padStart( 3, “0” ) }`;」のところです。
Stringの次を「 miliseconds」にし、ミリ秒だけの表示させるようにしてあります。
スタイルシートで整える
ミリ秒の表示をプラグインで実装しているカウントダウンタイマーに合わせるため、スタイルシートで整えます。
上記のHTMLソースを見ていただけると分かると思いますが、ミリ秒の装飾は「count_mili」というクラスを設定してます。
したがって文字フォントや色などは「count_mili」にて設定していきます。
使用するプラグインにも寄るので、スタイルシートの内容としてはこれが正解ではないのですが、当ページで実装しているカウントダウンタイマーの場合での、ミリ秒のスタイルシートは以下の通りです。
.count_mili{
display:inline;
position:absolute;
margin-top:15px;
margin-left:5px;
color:#DD3333
}
コメント