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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript の for ループと二重 for ループの詳細な説明
  • 画像のプリロードと遅延ロードを実装するJavaScript
  • JavaScript 配列を走査する 5 つの方法
  • JavaScript クラス配列の詳細な理解
  • JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

<<:  Linux で docker-compose を使用したソフトウェア構成の詳細な説明

>>:  MySQL での置換例の詳細な説明

推薦する

Linux で開いているポートへのリモート アクセスを許可する方法

1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...

Linuxのseqコマンドを使用して数字のシーケンスを生成します(推奨)

Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...

MySQL データ定義言語 DDL の基本ステートメント

MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...

MySQLのグループカウントと範囲集計を実装する2つの方法

1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

mysql コマンドライン スクリプトの実行例

この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...

Dockerを使用してプライベートGitLabを構築する2つの方法

最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...

Docker+Jenkinsを使用して自動的にビルドおよびデプロイする

この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...

div 内の img と span の垂直方向の中央揃えの問題について

以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<htm...

Webフロントエンド開発コース Webフロントエンド開発ツールとは

インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...

LinuxデバッガGDBの基本的な使い方の詳細な説明

目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...

MySQLデータベースインデックスの欠点と適切な使用

目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...

動的なデジタル時計を実装するJavaScript

この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...

CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス

目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...

Vue.jsはシンプルなタイマー機能を実装します

この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します...