Velo初心者向け｜カウントダウンタイマーを設置する方法

Wix StudioでVeloを使えば、JavaScriptの力でカウントダウンタイマーを簡単に実装できます。「イベント開始まであと○日」や「セール終了まで」などの表示に便利です。この記事では、初心者でもできるシンプルなカウントダウンタイマーの作り方を解説します。

① テキスト要素をページに設置する

Wixエディターでテキストを追加し、IDを countdownText に変更します。

表示させたい位置に配置しておきましょう。

② カウントダウン終了日を設定する

終了日時をコード内で指定します（例：2025年4月30日 23:59:59）。

③ Veloコードを貼り付ける

以下のコードをページコードに貼り付けます。


$w.onReady(function () {
  const deadline = new Date("2025-04-30T23:59:59");

  function updateCountdown() {
    const now = new Date();
    const diff = deadline - now;

    if (diff <= 0) {
      $w("#countdownText").text = "イベントが開始されました！";
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    $w("#countdownText").text = `${days}d ${hours}h ${minutes}m ${seconds}s`;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
});

④ プレビューで動作確認

プレビューで表示を確認しましょう。秒単位でカウントダウンされていればOKです。

まとめ

このように、Veloを使えばコードだけでシンプルなカウントダウンタイマーを設置できます。

イベントの開始直前まで正確にカウントダウンを表示し、タイミングに応じて表示文言を切り替えることも可能です。

より複雑な仕様や複数タイマーの同期なども、今後の応用としてチャレンジしてみましょう！

応用アイデア（おまけ）

タイマー終了時の表示を変更する
たとえば "イベントが開始されました" など、用途に応じて表示を変更するとより実用的です。

複数タイマーを同期させたい場合
同じコードロジックを使えば、複数のタイマーを同時に表示・制御することも可能です。

スタイルのカスタマイズ
テキストサイズや色、背景の装飾など、デザインに合わせたスタイリングも忘れずに！