期間限定フラッシュセール機能を実装するJavaScript

この記事では、期間限定フラッシュセール機能を実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
 </head>
 <本文>
  <div class="box">
   <div id="d"></div> <!-- 残り日数 -->
   <div id="h"></div> <!-- 残り時間 -->
   <div id="m"></div> <!-- 残り時間 -->
   <div id="s"></div> <!-- 残り秒数 -->
  </div>
  <スクリプト>
   //フラッシュセールの終了時刻を設定します。var endTime = new Date('2021-10-22 18:51:59'), endSeconds = endTime.getTime();
   //残り時間を保存するための変数を定義します var d = h = m = s = 0;
   // 限られた時間の 2 番目のキル効果を達成するためのタイマーを設定します。var id = setInterval(seckill,1000);
   関数seckill(){
    var nowTime = new Date(); //現在の時刻を取得します //秒単位の時間差を取得します var residual = parseInt((endSeconds - nowTime.getTime())/1000);
     if(remaining>0){//フラッシュセールの期限が切れたかどうかを判断します//残り日数を計算します（60*60*24で割り、切り上げて残り日数を取得します）
      d = parseInt (残り / 86400);
      // 残り時間を計算します (60*60 で割って時間に変換し、24 時間を法として残り時間を取得します)
      h = parseInt((残り / 3600) % 24);
      // 残り時間を計算します (60 で割って時間を求め、60 を法として残り時間を計算します)
      m=parseInt((残り / 60) % 60);
      // 残り秒数を計算します (残り秒数を取得するには 60 を法とします)
      s = parseInt (残り % 60);
      // 残りの日数、時間、分、秒を 2 桁で表します d = d<10 ? '0' + d : d;
      h = h<10 ? '0' + h : h;
      m = m<10 ? '0' + m : m;
      s = s<10 ? '0' + s : s;
     }それ以外{
      clearInterval(id); //2回目のセールが期限切れになったので、タイマーをキャンセルします。d = h = m = s ='00';
     }
     //指定された Web ページに残りの日数、時間、分、秒を表示します。 document.getElementById('d').innerHTML = d + 'days';
     document.getElementById('h').innerHTML = h + '時';
     document.getElementById('m').innerHTML = m + '分';
     document.getElementById('s').innerHTML = s + '秒';
   }
  </スクリプト>
 </本文>
</html>

JS を使用した期間限定フラッシュセールの簡単な例をご紹介します。

<!DOCTYPE html>
<html>
<head lang="ja">
    <メタ文字セット="UTF-8">
    <タイトル></タイトル>
    <スタイル>
        .product{ border: 3px solid orange; display: inline-block; margin-left: 400px; width: 400px; }
        .red{ 色: 赤; フォントサイズ: 25px; }
    </スタイル>
</head>
<本文>


<div class="product" style="text-align: center;">
    <img src="jquery case-blinds/images/0.jpg" alt="" width="150"/>
    <p>完璧な男</p>
    <span>元の価格: <del>99億</del></span>
    <br/>
    <span>現在の価格: <span class="red">100 元</span></span>
    <br/>
    <span>セールはあとで終了します:</span><span id="time"></span>
</div>


<スクリプト>


    var stopTime = new Date(3000,11,14,0,0,0);
    var nowTime = 新しい Date();
    var jianGe = (停止時間 - 現在時間)/1000;


    var day = Math.floor(jianGe/60/60/24);
    var hour = Math.floor(jianGe/60/60%24);
    var min = Math.floor(jianGe/60%60);
    var sec = Math.floor(jianGe%60);
    var showTime = day+'日'+hour+'時間'+min+'分'+sec+'秒';
    document.getElementById('time').innerText = showTime;


    //タイマー: 関数が実行される頻度 //setInterval(func,ms)
    var タイマー = setInterval(関数 () {


        var nowTime = 新しい Date();
        var jianGe = (停止時間 - 現在時間)/1000;


        var day = Math.floor(jianGe/60/60/24);
        var hour = Math.floor(jianGe/60/60%24);
        var min = Math.floor(jianGe/60%60);
        var sec = Math.floor(jianGe%60);


        var showTime = day+'日'+hour+'時間'+min+'分'+sec+'秒';


        document.getElementById('time').innerText = showTime;


        日==0&&時間==0&&分==0&&秒==0){
            //タイマーをオフにする clearInterval(timer);
        }


    },1000);

</スクリプト>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: