タイマー

デモ

JSコードコピー

使い方

任意の空の要素を用意し、そこにdata-jscopyand="timer"と、期限となる日時をdata-jscopyand-attributes="2021-01-01 23:59:59"のような形式で付与してください。

サンプルHTMLを表示する

解説

JSコードの解説を見てみる

最初に時間計算をするための変数を秒単位から日単位まで準備します。

期限取得元かつ描画先となる要素を取得し、変数に格納します。
data-jscopyand-attributes属性にはnew Date可能な文字列が入っているため、その値でDate作成し、getTimeでミリ秒を取得します。

残り時間を描画するための関数を定義していきます。
残り時間は変数targetDateTimeのミリ秒から、Date.nowで取得できる現在時刻のミリ秒を引くことで求めることができます。
最初に定義した時間計算をするための変数を使い、日・時間・分・秒を求めていきます。
結果をtarget.innerTextで描画します。

アニメーションを設定します。
requestAnimationFrameに自分自身を呼ぶ関数を定義することで、アニメーションに最適な形で関数をループ処理してくれます。

ヘルプ・コンタクト

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。

他のコードを探す

リクエスト受付中です。
Twitter の固定ツイートか DM にてご連絡ください。