タイマー
デモ
JSコードコピー
使い方
任意の空の要素を用意し、そこにdata-jscopyand="timer"
と、期限となる日時をdata-jscopyand-attributes="2021-01-01 23:59:59"
のような形式で付与してください。
解説
最初に時間計算をするための変数を秒単位から日単位まで準備します。
期限取得元かつ描画先となる要素を取得し、変数に格納します。
data-jscopyand-attributes
属性にはnew Date
可能な文字列が入っているため、その値でDate
作成し、getTime
でミリ秒を取得します。
残り時間を描画するための関数を定義していきます。
残り時間は変数targetDateTime
のミリ秒から、Date.now
で取得できる現在時刻のミリ秒を引くことで求めることができます。
最初に定義した時間計算をするための変数を使い、日・時間・分・秒を求めていきます。
結果をtarget.innerText
で描画します。
アニメーションを設定します。
requestAnimationFrame
に自分自身を呼ぶ関数を定義することで、アニメーションに最適な形で関数をループ処理してくれます。
ヘルプ・コンタクト
機能に関するご質問は、このページの下部に表示されている Twitter
のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM
等でご連絡ください。