期間限定フラッシュセール機能を実現する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);