ネイティブ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 を使用したソフトウェア構成の詳細な説明
1. ファイアウォール設定ファイルを変更する # vi /etc/sysconfig/iptable...
Linux の seq コマンドは、数字のリストを非常に高速に生成でき、使いやすく柔軟性に優れてい...
MySQL DDL ステートメントDDL、DMLとは何ですか。 DDL はデータ定義言語であり、CR...
1つ目:通常動作 選択 SUM(ddd) AS count_days、 場合 aa.days >...
最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...
この記事では、例を使用して MySQL コマンドライン スクリプトの実行について説明します。ご参考ま...
最初の方法: docker インストール1. オープンソース版のイメージを取得する2. 対応するデー...
この記事では、Docker+Jenkins の自動ビルドデプロイメントを紹介し、皆さんと共有します。...
以下のように表示されます。 XML/HTML コードコンテンツをクリップボードにコピー<htm...
インターネット技術の発展に伴い、ユーザーはますます Web ページに依存するようになり、Web フロ...
目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...
目次インデックスの適切な使用1. 通常のインデックスのデメリット2. 主キーインデックスの落とし穴3...
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...
目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...
この記事では、参考までに、簡単なタイマー機能を実装するためのvue.jsの具体的なコードを紹介します...