ネイティブ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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux で docker-compose を使用したソフトウェア構成の詳細な説明
最近、絵文字にコメントする機能が必要なコメント機能に取り組んでいたため、 contentEditab...
目次1. Document.execCommand() メソッド(1)コピー操作(2)貼り付け操作(...
Linux touch コマンドの詳細な説明: 1. コマンド機能:ファイルまたはディレクトリの作成...
2つのケース: 1. 索引あり 2. 索引なし前提条件:方法: コマンドラインを使用してシミュレート...
場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...
1. Ansibleのプレイブックを使用してhttpdを自動的にインストールする1) まず、Ansi...
# Windows および Linux 上の Redis のインストール デーモン構成Redis の...
縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...
1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...
初心者は自分で録音しましょう1. スーパーバイザーをインストールします。 Supervisor は ...
MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...
1. 基本環境1. オペレーティングシステム: CentOS 7.3 2. MySQL: 8.0.1...
1. フォーム1. フォームの役割HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユー...
1. Dockerに適したRedisのバージョンを見つけるdocker hubで見つけることができ...
ポート80も設定されています。まずファイアウォール設定ファイルを入力しますシェル># vim ...