← 動的パーツギャラリーへ戻る

パーツ番号 01-02-03 ・ JavaScript使用

カウントダウンタイマーバナー

残り時間が時:分:秒でリアルタイムに減少するセール告知バナー。ECサイトの期間限定キャンペーンで緊急性を演出できます。

js

プレビュー

ソースコード

HTML

<div class="d01-02-03-banner">
          <p class="d01-02-03-lead">SALE 終了まで</p>
          <div class="d01-02-03-clock">
            <div class="d01-02-03-unit"><span class="d01-02-03-h">00</span><small>時間</small></div>
            <span class="d01-02-03-sep">:</span>
            <div class="d01-02-03-unit"><span class="d01-02-03-m">00</span><small>分</small></div>
            <span class="d01-02-03-sep">:</span>
            <div class="d01-02-03-unit"><span class="d01-02-03-s">00</span><small>秒</small></div>
          </div>
          <a href="#" class="d01-02-03-btn" onclick="return false">セール会場へ</a>
        </div>

CSS

.prev.d01-02-03{background:#1e1b4b}
        .d01-02-03-banner{width:100%;max-width:340px;padding:28px 24px;border-radius:16px;text-align:center;color:#fff;background:linear-gradient(160deg,#312e81,#7c3aed);box-shadow:0 16px 36px rgba(49,46,129,.5)}
        .d01-02-03-lead{font-size:12px;letter-spacing:.18em;color:#fbbf24;font-weight:700;margin-bottom:14px}
        .d01-02-03-clock{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-bottom:20px}
        .d01-02-03-unit{display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.12);border-radius:10px;padding:8px 10px;min-width:52px}
        .d01-02-03-unit span{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
        .d01-02-03-unit small{font-size:10px;opacity:.75;margin-top:4px}
        .d01-02-03-sep{font-size:22px;font-weight:800;padding-top:8px}
        .d01-02-03-btn{display:inline-block;padding:11px 26px;border-radius:999px;background:#fbbf24;color:#3b0764;font-weight:800;font-size:14px;text-decoration:none;transition:transform .2s ease}
        .d01-02-03-btn:hover{transform:scale(1.05)}

JavaScript

(function(){
        var root=document.getElementById('item-01-02-03');if(!root)return;
        var h=root.querySelector('.d01-02-03-h'),m=root.querySelector('.d01-02-03-m'),s=root.querySelector('.d01-02-03-s');
        var end=Date.now()+ (5*3600+42*60+17)*1000;
        function pad(n){return (n<10?'0':'')+n;}
        function tick(){
          var d=Math.max(0,Math.floor((end-Date.now())/1000));
          h.textContent=pad(Math.floor(d/3600));
          m.textContent=pad(Math.floor(d%3600/60));
          s.textContent=pad(d%60);
        }
        tick();setInterval(tick,1000);
      })();

クラス名 .d01-02-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。