HTML、CSS、jQuery を使用してレスポンシブなカウントダウン効果を作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用してレスポンシブなカウントダウン効果を作成する方法

PHPz

リリース： 2023-10-27 08:18:19

オリジナル

1237 人が閲覧しました

HTML、CSS、jQuery を使用してレスポンシブなカウントダウン効果を作成する方法

概要:
カウントダウン効果は、Web 開発における一般的な機能の 1 つです。特にイベントプロモーション、製品プロモーション、その他のシナリオに適しています。この記事では、HTML、CSS、jQuery を使用してレスポンシブなカウントダウン効果を作成する方法を説明し、具体的なコード例を示します。

実装手順:

HTML 構造の作成:

<div id="countdown">
  <div class="timer">
 <span id="days"></span>
 <span>:</span>
 <span id="hours"></span>
 <span>:</span>
 <span id="minutes"></span>
 <span>:</span>
 <span id="seconds"></span>
  </div>
</div>

ログイン後にコピー

カウントダウン効果は、ID が「countdown」の div 要素に表示されます。

CSS スタイルの追加:
```
#countdown {
  text-align: center;
}

.timer {
  display: inline-block;
  font-size: 30px;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
}

.timer span {
  margin: 0 5px;
  font-weight: bold;
}
```
ログイン後にコピー
スタイルを設定すると、ページの中央にカウントダウン効果が表示され、カウントダウン数字のスタイルが設定されます。

JavaScript コードを追加します:
まず、jQuery ライブラリを導入します:

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

ログイン後にコピー

次に、カウントダウンロジックを記述します:

function countdown(endDate) {
  var timer;
  var daysSpan = $('#days');
  var hoursSpan = $('#hours');
  var minutesSpan = $('#minutes');
  var secondsSpan = $('#seconds');

  function calculate() {
 var now = new Date();
 var remainingTime = endDate.getTime() - now.getTime();

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

 daysSpan.text(days);
 hoursSpan.text(('0' + hours).slice(-2));
 minutesSpan.text(('0' + minutes).slice(-2));
 secondsSpan.text(('0' + seconds).slice(-2));

 if (remainingTime <= 0) {
   clearInterval(timer);
 }
  }

  function start() {
 calculate();
 timer = setInterval(calculate, 1000);
  }

  start();
}

// 设置倒计时结束时间为：2023年1月1日
var endDate = new Date('2023-01-01T00:00:00');
countdown(endDate);

ログイン後にコピー

上記のコードカウントダウン関数 countdown は、現在時刻と指定された終了時刻を取得して残りの日、時間、分、秒を計算し、HTML ページに表示します。

コード分析:

clearInterval(timer) はタイマーを停止するために使用されます。カウントダウンが終了すると、タイマーは停止します。ランニング。。
setInterval(calculate, 1000) リアルタイムの更新カウントダウンを実現するために、calculate 関数が 1 秒ごとに呼び出されるように設定します。

注:

上記のコード例を使用する前に、jQuery ライブラリファイルが正しく導入されていることを確認してください。
さまざまなデバイスの画面サイズに対応するために、メディアクエリと CSS メディアタイプを使用して、カウントダウン効果がさまざまなデバイス上で適切な表示効果をもたらすようにすることができます。

概要:
HTML、CSS、jQuery を使用すると、レスポンシブなカウントダウン効果を簡単に実装できます。この記事で提供されているコード例が、独自のプロジェクトでカウントダウン機能を使用するのに役立つことを願っています。

以上がHTML、CSS、jQuery を使用してレスポンシブなカウントダウン効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。