期間限定フラッシュセール機能を実現する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サーバーが消えたエラーの解決策

推薦する

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...

jsはショッピングウェブサイトの商品の拡大鏡効果を実現します

この記事では、ショッピングサイトの商品の拡大鏡効果を実現するためのjsの具体的なコードを紹介します。...

標準的なHTMLの書き方は、Dreamweaverによって自動的に生成されるものとは異なります。

コードをコピーコードは次のとおりです。 <!--doctype はドキュメント タイプ htm...

Vue の新しい組み込みコンポーネントの使用方法の詳細な説明

目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...

MacBook 向け Python 3.7 インストール チュートリアル

MacBookにpython3.7.0をインストールする詳細な手順は、参考までに記録されています。具...

Nginx+FastDFSでイメージサーバーを構築

設置環境セントス環境依存性: yum -y gccをインストールします yum インストール -y ...

CSS でホバー ドロップダウン メニューを実装する方法

いつものように、今日は非常に実用的な CSS 効果についてお話します。マウスがボタンに移動すると、ド...

MySQL 8.0.18 のインストールと設定方法のグラフィック チュートリアル (Linux)

この記事では、Linux MySQL 8.0.18のインストールと設定のグラフィックチュートリアルを...

Google ブラウザのラベルと入力間のスペースに関する小さな問題

最初にコード、次にテキストコードをコピーコードは次のとおりです。 <!DOCTYPE html...

優れたグラフィックデザイナーが習得すべき7つのスキル

1》ウェブデザインが得意であること2》Webページのデザイン方法を知る3》計画する4. SEOを理解...

JavaScript スクリプトが実行されるタイミングの詳細な説明

JavaScript スクリプトは HTML 内のどこにでも埋め込むことができますが、いつ呼び出され...

Brotli圧縮アルゴリズムを有効にするNginxの実装プロセスの詳細な説明

序文Web アプリケーションでは、トラフィックを節約し、転送データのサイズを縮小し、転送効率を向上さ...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

Nginx 仮想ホスト (IP ベース) を構成する 3 つの方法の詳細な説明

Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...

グループ化されたクエリでのGROUP BYの使用とSQL実行順序の説明

SQL では、GROUP BY は SELECT の結果のデータをグループ化するために使用されます。...