パーツ番号 01-02-03 ・ JavaScript使用
カウントダウンタイマーバナー
残り時間が時:分:秒でリアルタイムに減少するセール告知バナー。ECサイトの期間限定キャンペーンで緊急性を演出できます。
プレビュー
ソースコード
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 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。