パーツ番号 05-05-11 ・ JavaScript使用

リアルタイム人数カウンター

数秒ごとに数値が小さく増減し、リアルタイム感を演出するウィジェットです。WordPress会員サイトの「今アクセス中」表示や在庫残数表示に使えます。

プレビュー

ソースコード

HTML

<div class="d05-05-11-tile">
          <div class="d05-05-11-head">
            <span class="d05-05-11-dot"></span>
            <span class="d05-05-11-label">現在のオンライン会員</span>
          </div>
          <div class="d05-05-11-num" id="d05-05-11-num">128</div>
          <div class="d05-05-11-sub">リアルタイム更新中</div>
        </div>

CSS

.prev.d05-05-11{background:#f1f5f9}
        .d05-05-11-tile{width:220px;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 20px;box-shadow:0 6px 18px rgba(15,23,42,.06);text-align:center}
        .d05-05-11-head{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:10px}
        .d05-05-11-dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
        .d05-05-11-label{font-size:11px;color:#64748b;font-weight:600}
        .d05-05-11-num{font-size:34px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
        .d05-05-11-sub{font-size:10.5px;color:#94a3b8;margin-top:4px}

JavaScript

(function(){
        var root=document.querySelector('#item-05-05-11');if(!root)return;
        var el=root.querySelector('#d05-05-11-num');
        var cur=128;
        setInterval(function(){
          cur+=Math.floor(Math.random()*7)-3;
          if(cur<80)cur=80;
          if(cur>220)cur=220;
          el.textContent=cur;
        },1500);
      })();

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