この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。 ファイル index.html コード: <!DOCTYPE html> <html> <ヘッド> <メタ文字セット="GBK" /> <title>表示</title> <link rel="スタイルシート" href="css/index.css" type="text/css" /> </head> <本文> <div class="divMain"> <img src="img/secondBuyImg.jpg" id="imgMain" /> <h3 style="color: #FF0000;">フラッシュセール終了までの残り時間:</h3> <div id="divSecond"> <div id="divF1" class="divFours"> <font class="fontdate" size="4" id="font1">00</font> <font class="fonttext" size="4">日</font> </div> <div id="divF2" class="divFours"> <font class="fontdate" size="4" id="font2">00</font> <font class="fonttext" size="4">時間</font> </div> <div id="divF3" class="divFours"> <font class="fontdate" size="4" id="font3">00</font> <font class="fonttext" size="4">分</font> </div> <div id="divF4" class="divFours"> <font class="fontdate" size="4" id="font4">00</font> <font class="fonttext" size="4">秒</font> </div> </div> </div> </本文> </html> <script type="text/javascript" src="js/index.js"></script> スタイルシートファイル index.css #imgメイン{ } .divMain{/*外側のdiv*/ 幅: 100%; 高さ: 100%; ディスプレイ: フレックス; コンテンツの配置: 左; align-items: center;/*弾性ボックスの垂直方向の中央に配置*/ flex-direction: column;/*フレキシブルボックスのソート方向を設定する*/ } /* 外側の時間 div */ #div秒{ 幅: 500ピクセル; 高さ: 500px; ディスプレイ: フレックス; コンテンツの中央揃え: 中央; align-items:flex-start; flex-direction: 行; } .divFours{/*時間div1-4*/ 幅: 10%; 高さ: 10%; 境界線: 2px 実線の赤; ディスプレイ: フレックス; flex-direction: 行; コンテンツの中央揃え: 中央; アイテムの位置を中央揃えにします。 } /* 画像の外側の div */ #divFrist{ 幅: 20%; } /* 残り時間表示 */ .fontdate{ 色: ディープピンク; } .fonttext{ 色: ダークブルー; } JavaScript ファイル index.js 関数 torun(str){ var date = 新しい Date(); var systemDay=date.getDate(); var systemHour=date.getHours(); var systemMinute=date.getMinutes(); var systemSecond=date.getSeconds(); var endDate = new Date(str); var endDay=endDate.getDate(); var endHour=endDate.getHours(); var endMinute=endDate.getMinutes(); var endSecond=endDate.getSeconds(); var 残り日数=-(システム日数-終了日数)-1; var 残りの時間=-(システム時間-終了時間)-1; var 残り時間=-(システム時間-終了時間)-1; var 残り秒数=(システム秒数-終了秒数>=0)?システム秒数-終了秒数+59:-(システム秒数-終了秒数)-1; console.log("残り"+残り日数+"日数"); console.log("残り"+残り時間+"時間"); console.log("残り"+残り分+"ポイント"); console.log("残り"+残り秒数+"秒数"); console.log("現在の日"+systemDay+"終了日"+endDay); console.log("現在の時刻" + systemHour + "終了時刻" + endHour); console.log("現在の分"+systemMinute+"終了分"+endMinute); console.log("現在の秒"+systemSecond+"終了秒"+endSecond); document.getElementById("font1").innerText=残り日数+""; document.getElementById("font2").innerText=残りの時間+""; document.getElementById("font3").innerText=残り時間+""; document.getElementById("font4").innerText=残りの秒数+""; } var int=setInterval('torun("2020-12-5 23:59:59")',60); 目次 効果 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析
マウスをある領域の上に置くと、その領域に点線の境界線と線のアニメーションが表示されるというクールな効...
記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...
CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...
現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...
Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...
最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...
1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...
具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...
この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...
テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...
この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...
1. Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、ボックス モデル...
目次1. $(".box1").click() メソッドを実装する2. $(&q...
dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...
目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...