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 での置換例の詳細な説明

推薦する

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...

JS でクリップボード API を使用する方法

目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...

Linux touch コマンドの使用例

Linux touch コマンドの詳細な説明: 1. コマンド機能:ファイルまたはディレクトリの作成...

例を通してMySQLの更新がテーブルをロックするかどうかを判定する

2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

Linux システムで httpd の自動インストールと構成を Ansible で実装する方法

1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...

Windows および Linux での Redis のインストールとデーモン設定

# Windows および Linux 上の Redis のインストール デーモン構成Redis の...

MySQLテーブルシャーディングとパーティショニングの具体的な実装方法

縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...

Centos7 でスーパーバイザ デーモンをインストールして設定する方法

初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

CentOS7.3 での MySQL 8.0.13 のインストールと設定のチュートリアル

1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...

HTML フォーム_PowerNode Java アカデミー

1. フォーム1. フォームの役割HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユー...

Docker での Redis の最も詳細なインストールと構成 (画像とテキスト付き)

1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...

Linux ファイアウォールを設定してポート 80 と 3306 を開く方法

ポート80も設定されています。まずファイアウォール設定ファイルを入力しますシェル># vim ...