期間限定フラッシュセール機能を実現するJavaScriptタイマー

期間限定フラッシュセール機能を実現するJavaScriptタイマー

この記事では、期間限定フラッシュセール機能を実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript タイマー原理の詳細な説明
  • JavaScriptタイマーの詳細な説明
  • JavaScript タイマーの詳細
  • 画像のシームレスなスクロールを実現する JavaScript タイマー
  • JavaScript タイマーの種類の概要

<<:  MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析

>>:  MySQLサーバーが消えたエラーの解決策

推薦する

CSS で点線の境界線のスクロール効果を実装するサンプルコード

マウスをある領域の上に置くと、その領域に点線の境界線と線のアニメーションが表示されるというクールな効...

HTML+CSS を使用して、画像の右上隅に削除の十字と画像削除ボタンを追加します。

記録として、将来使用される可能性があり、困っている友人も使用できます。 BBはもうやめて、まずはレン...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

CSSカスタムプロパティの予備的な理解

現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

TypeScriptのインストールと使用方法と基本的なデータ型

最初のステップはTypeScriptをグローバルにインストールすることですnpmを使用してインストー...

Linux のリンク解除機能とファイルの削除方法

1. リンク解除機能ハード リンクの場合、unlink はディレクトリ エントリを削除し、inode...

CSSマスクのフルスクリーン中央揃えを実装する方法

具体的なコードは次のとおりです。 <スタイル> #トーストローダーフルスクリーン{ 高さ...

Reactはページング効果を実装する

この記事では、Reactでページング効果を実現するための具体的なコードを参考までに紹介します。具体的...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

Mysql データベースの高度なビュー、トランザクション、インデックス、自己接続、ユーザー管理の例の分析の使用

この記事では、ビュー、トランザクション、インデックス、自己接続、ユーザー管理など、MySQL データ...

Flexレイアウトを使用してdiv内のサブ要素を垂直方向に中央揃えする例

1. Flex は Flexible Box の略で、「柔軟なレイアウト」を意味し、ボックス モデル...

Navicatをサーバー上のdockerデータベースに接続する方法

dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...

11 の素晴らしい JavaScript コード リファクタリングのベスト プラクティスの概要

目次1. 関数の抽出2. 重複した条件付きスニペットを結合する3. 条件分岐文を関数に抽出する4. ...