パーツ番号 09-01-12 ・ JavaScript使用

カウントダウンタイマーバッジ

時:分:秒がリアルタイムに減っていくバッジ(デモは0からループ)。WordPressのタイムセールや限定キャンペーンの残り時間表示に緊迫感を与えます。

autojs

プレビュー

ソースコード

HTML

<div class="d09-01-12-badge">
          <span class="d09-01-12-lbl">セール終了まで</span>
          <span class="d09-01-12-time"><b class="d09-01-12-h">00</b>:<b class="d09-01-12-m">00</b>:<b class="d09-01-12-s">00</b></span>
        </div>

CSS

.d09-01-12-badge{display:flex;flex-direction:column;align-items:center;gap:8px;background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;padding:16px 26px;border-radius:14px;box-shadow:0 8px 20px rgba(239,68,68,.3)}
        .d09-01-12-lbl{font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.9}
        .d09-01-12-time{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:1px}
        .d09-01-12-time b{display:inline-block;min-width:1.1em}

JavaScript

(function(){
        var root=document.getElementById('item-09-01-12');if(!root)return;
        var h=root.querySelector('.d09-01-12-h'),m=root.querySelector('.d09-01-12-m'),s=root.querySelector('.d09-01-12-s');
        var total=2*3600+59*60+59;
        function pad(n){return (n<10?'0':'')+n;}
        function tick(){
          total--;if(total<0)total=2*3600+59*60+59;
          var hh=Math.floor(total/3600),mm=Math.floor((total%3600)/60),ss=total%60;
          h.textContent=pad(hh);m.textContent=pad(mm);s.textContent=pad(ss);
        }
        tick();setInterval(tick,1000);
      })();

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