JavaScript でカウントダウン効果を実装する

カウントダウン効果を実現するにはJavascriptを使用します。参考までに、具体的な内容は次のとおりです。

まだフロントエンドの勉強中です。コードに不備や間違った考えがあったらご容赦ください。アドバイスをよろしくお願いします。

ショッピングモールの Web サイトでは、何かが起こるまでの残り時間をユーザーに知らせるために、Web サイトまたはアプリ上にカウントダウン領域が表示されることがよくあります。コードを使用してこれを実装してみましょう。

コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
 <スタイル>
 div {
  マージン: 300px;
  境界線: 1px ピンク
 }

 スパン {
  表示: インラインブロック;
  幅: 40px;
  高さ: 40px;
  背景色: 青;
  フォントサイズ: 20px;
  色: #fff;
  テキスト配置: 中央;
  行の高さ: 40px;
 }
 </スタイル>
</head>
<本文>
<div>
 <span class="hour">1</span>
 <span class="minute">2</span>
 <span class="second">3</span>
</div>
<スクリプト>
 var 時間 = document.querySelector('.hour')
 var min = document.querySelector('.minute')
 var sce = document.querySelector('.second')
 var inputTime=+新しい日付('2021-2-8 16:40:00')
 //countDown()//最初の更新で空白スペースが発生しないように最初に呼び出します//タイマーを開始します。これは、1000ms 待機した後に開始されるタイマー setInterval(countDown,1) です。
 関数 countDown() {
 var nowTime = +new Date(); // 現在の時刻の合計ミリ秒数を返します var times = (inputTime - nowTime) / 1000; // times は残りの合計秒数です var h = parseInt(times / 60 / 60 % 24); //h = h < 10 ? '0' + h : h;
 hours.innerHTML = h; // 残りの時間を時間のブラックボックスに入力します var m = parseInt(times / 60 % 60); // 分 m = m < 10 ? '0' + m : m;
 min.innerHTML = m;
 var s = parseInt(times % 60); // 現在の秒 s = s < 10 ? '0' + s : s;
 sce.innerHTML を s に追加します。
 }
</スクリプト>
</本文>
</html>

デモンストレーション効果:

時間は秒単位でカウントダウンする

コードの説明:

ここでは、ブロック div 要素内に 3 つのインライン span 要素を配置しています。インライン要素の幅と高さは変更できないため、すべてインラインブロック要素に置き換えられます。

ここでは、カウントダウンを、それぞれ時間、分、秒に対応する 3 つのスパンボックスで変更する必要があるため、これら 3 つのスパンのイベントが取得されます。次に、inputTime 変数を使用して目的地の時間を受け取ります。

次に、countDown という名前の関数を作成します。変数 nowTime は、関数内で現在の時刻を受け取るために使用されます。受信時間はミリ秒単位であるため、変数 times を使用して宛先時間と現在の時間の間の時間差を受信し、1 秒 = 1000 ミリ秒であるため 1000 で割って残りの秒数を取得します。

残りの時間を表すには h を使用します。1 日 = 24 時間、1 時間 = 60 分、1 分 = 60 秒です。したがって、ここでは合計秒数/60/60%24 を使用して残りの時間を取得します。次に、スタイルの見栄えを良くするために、三項演算子を使用して、表示される小数点以下の桁数を 2 桁に設定します。時間は 10 未満ですか? 10 未満の場合は、その前に「0」を追加します。10 より大きい場合は、数値をそのまま返します。そして、h を使用して受信し、h を時間ボックスに渡します。同じ原則が、以下の分と秒にも適用されます。
次に関数を記述し、タイマーを使用して 1/1000 ミリ秒間隔でこの関数を呼び出します。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: