この記事では、期間限定フラッシュセール機能を実装するための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 の使用法と相違点の分析
この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...
この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...
コードをコピーコードは次のとおりです。 <!--doctype はドキュメント タイプ htm...
目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...
MacBookにpython3.7.0をインストールする詳細な手順は、参考までに記録されています。具...
設置環境セントス環境依存性: yum -y gccをインストールします yum インストール -y ...
いつものように、今日は非常に実用的な CSS 効果についてお話します。マウスがボタンに移動すると、ド...
この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...
最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...
1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...
JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...
序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...
目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...