JavaScript はフロントエンド Web ページでカウントダウンを実装します

ネイティブJavaScriptを使用してカウントダウンを簡単に実装します。参考までに、具体的な内容は次のとおりです。

効果

コード

// ハイライトされたブロック
<!DOCTYPE html>
<html>

<ヘッド>
 <メタ文字セット="utf-8">
 <タイトル></タイトル>

 <!-- css スタイル -->
 <スタイル タイプ="text/css">
  * {
   マージン: 0;
   パディング: 0;
  }

  .onsell {
   高さ: 400px;
   幅: 200ピクセル;
   境界線: 1px 実線 #F2F2F2;
   マージン: 10px;
   ボックスの影: 1px 2px 4px rgba(0, 0, 0, .2);
  }

  。箱 {
   /* 表示: なし; */
   フロート: 左;
   マージン: 328px 34px 0;
  }

  .box div {
   位置: 相対的;
   表示: インラインブロック;
   幅: 40px;
   高さ: 40px;
   背景色: #333;
   色: #fff;
   フォントサイズ: 20px;
   テキスト配置: 中央;
   行の高さ: 40px;
   ボックスの影: 1px 2px 4px rgba(0, 0, 0, .4);
  }
 </スタイル>

</head>

<本文>
 <!-- 要件: 製品は将来 1 日間販売され、js: hours: minutes: seconds を使用してカウントダウン効果が作成されます -->
 <div class="onsell">
  <div class="box">
   <div class="hour">00</div>
   <div class="minutes">00</div>
   <div class="seconds">00</div>
  </div>
 </div>
</本文>

</html>
<スクリプト>
 window.onload = 関数（）{
  hour = document.querySelector('.hour') とします。
  minutes = document.querySelector('.minutes') とします。
  秒数を document.querySelector('.seconds') とします。

  // カウントダウンタイムスタンプは + を使用して時間オブジェクトをタイムスタンプに変換します。これは Date.now() と同等です。
  wantTime = +new Date('2021-3-17 18:00:00') とします。
  カウントタイム()

  タイマーをsetInterval(() => {
   カウントタイム()
  }, 1000)

  関数 countTime() {
   現在の時刻を +新しい日付() とします
   （希望時間 >= 現在の時間）の場合{
    let times = (wantTime - currentTime) / 1000 // 合計秒数 timestamp / 1000 = 秒数 let remainDay = parseInt(times / 60 / 60 / 24) // 残りは残りの日数です console.log(remainDay);
    残り日数が0の場合
     if(回数 < 1) {
     // カウントダウン終了 // ここで操作をトリガー}
     // 日数が1日未満の場合は、計時を開始します。setTime(times)
    }
   } それ以外 {
    時間.innerHTML = '00'
    minutes.innerHTML = '00'
    秒.innerHTML = '00'
   }
  }


  関数setTime(time) {

   // 大まかなバージョン let s = parseInt(time % 60)
   s = s < 10 ? '0' + s : s
   m = parseInt(時間 / 60 % 60) とします。
   m = m < 10 ? '0' + m : m
   h = parseInt(時間 / 60 / 60 % 24) とします。
   h = h < 10 ? '0' + h : h
   時間.innerHTML = h
   minutes.innerHTML = m
   seconds.innerHTML = 秒

  }

 }
</スクリプト>

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

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