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);
});