Web BENTO JS
カテゴリ一覧
カウント・タイマー

10 / COUNTER 12 パーツ

カウント・タイマーJS実装 12選

Q: カウントアップはいつ始まりますか？

IntersectionObserver でパーツが画面に入ったタイミングで一度だけ始まります。ページ読み込み直後に画面外でこっそり終わってしまう心配がありません。開始位置は threshold（しきい値）で調整できます。

Q: setInterval ではなく requestAnimationFrame を使う理由は？

requestAnimationFrame は画面の描画タイミングと同期して呼ばれるため、カクつきの少ないなめらかなアニメーションになります。非表示タブでは自動的に止まるので無駄な処理も発生しません。1秒刻みで十分なカウントダウン時計には setTimeout を使っています。

Q: カウントダウンの目標日時はどう指定しますか？

data-deadline 属性に「2026-12-31T23:59:59」のような形式で指定します。期限を過ぎると 0 で停止し、is-end クラスが付与されるので「終了しました」表示への切り替えも簡単です。

Q: 同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「カンマ区切りカウントアップ」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動く数字カウントアップ・タイマー系パーツのサンプル集です。プレビューは実際に動いています（カウント系はカードが見えた瞬間にスタート）。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。

該当するパーツが見つかりませんでした。

0件

累計制作実績

数値カウントアップ

<!-- data-to：目標値 / data-dur：所要ミリ秒 -->
<div class="bnto-cnt">
  <span class="num" data-bnto-count data-to="1280" data-dur="1600">0</span><span class="unit">件</span>
  <p class="lbl">累計制作実績</p>
</div>

.bnto-cnt {
  --c1: hsl(34 57% 48%);  /* 数字の色 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 22px 18px 18px;
  text-align: center;
}
.bnto-cnt .num {
  font-size: 40px; font-weight: 900;
  color: var(--c1); line-height: 1;
  /* 桁が変わっても幅がガタつかない等幅数字 */
  font-variant-numeric: tabular-nums;
}
.bnto-cnt .unit { font-size: 15px; font-weight: 800; margin-left: 3px; }
.bnto-cnt .lbl { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #5A6B7A; }

// 画面に入ったら data-to の値まで 0 からカウントアップ（複数設置OK）
// プレビューをクリックすると値をリセットして再生し直します
(function () {
  document.querySelectorAll('[data-bnto-count]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var to = parseFloat(el.dataset.to || '100');
    var dur = parseInt(el.dataset.dur || '1600', 10);
    var raf = null;
    function play() {
      cancelAnimationFrame(raf); // 再生中なら止めてやり直し
      var t0 = null;
      el.textContent = '0';
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min((ts - t0) / dur, 1);
        var e = 1 - Math.pow(1 - p, 3); // easeOut：終盤で減速
        el.textContent = Math.round(to * e);
        if (p < 1) raf = requestAnimationFrame(step);
      }
      raf = requestAnimationFrame(step);
    }
    new IntersectionObserver(function (entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect(); // 初回は見えた瞬間に一度だけ
      play();
    }, { threshold: 0.5 }).observe(el);
    // クリックでもう一度再生
    var wrap = el.closest('.bnto-cnt') || el;
    wrap.style.cursor = 'pointer';
    wrap.addEventListener('click', play);
  });
})();

使い方のコツ

目標値は data-to、所要時間は data-dur（ミリ秒）で個別に指定できます。「実績◯件」「満足度◯%」など、数字を並べるときは1〜2秒でサッと終わらせるのが心地よい目安です。プレビューをクリック（または ↺ ボタン）で再生し直せます。

累計会員数

0人

カンマ区切りカウントアップ

<div class="bnto-cnt2">
  <p class="lbl">累計会員数</p>
  <span class="num" data-bnto-count-comma data-to="128540" data-dur="1800">0</span><span class="unit">人</span>
</div>

.bnto-cnt2 {
  --c1: hsl(202 73% 50%);
  background: #fff; border: 2px solid #DFE9F1;
  border-left: 6px solid var(--c1);
  border-radius: 14px; padding: 16px 18px;
}
.bnto-cnt2 .lbl { margin: 0 0 5px; font-size: 12px; font-weight: 700; color: #5A6B7A; }
.bnto-cnt2 .num {
  font-size: 34px; font-weight: 900;
  color: var(--c1); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bnto-cnt2 .unit { font-size: 14px; font-weight: 800; margin-left: 3px; }

// 12,345 のようにカンマ区切りでカウントアップ（toLocaleString）
// プレビューをクリックすると値をリセットして再生し直します
(function () {
  document.querySelectorAll('[data-bnto-count-comma]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var to = parseFloat(el.dataset.to || '10000');
    var dur = parseInt(el.dataset.dur || '1800', 10);
    var raf = null;
    function play() {
      cancelAnimationFrame(raf); // 再生中なら止めてやり直し
      var t0 = null;
      el.textContent = '0';
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min((ts - t0) / dur, 1);
        var e = 1 - Math.pow(1 - p, 3);
        // toLocaleString が 3桁ごとのカンマを自動で入れてくれる
        el.textContent = Math.round(to * e).toLocaleString('ja-JP');
        if (p < 1) raf = requestAnimationFrame(step);
      }
      raf = requestAnimationFrame(step);
    }
    new IntersectionObserver(function (entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect(); // 初回は見えた瞬間に一度だけ
      play();
    }, { threshold: 0.5 }).observe(el);
    // クリックでもう一度再生
    var wrap = el.closest('.bnto-cnt2') || el;
    wrap.style.cursor = 'pointer';
    wrap.addEventListener('click', play);
  });
})();

使い方のコツ

5桁以上の大きな数字はカンマがあるだけで段違いに読みやすくなります。金額表示にしたいときは toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }) にすると「￥128,540」形式になります。プレビューをクリック（または ↺ ボタン）で再生し直せます。

0日 00時間 00分 00秒

カウントダウンタイマー

<!-- data-deadline：目標日時（YYYY-MM-DDTHH:MM:SS） -->
<div class="bnto-cd" data-bnto-countdown data-deadline="2026-12-31T23:59:59">
  <span class="seg"><b class="d">0</b><small>日</small></span>
  <span class="seg"><b class="h">00</b><small>時間</small></span>
  <span class="seg"><b class="m">00</b><small>分</small></span>
  <span class="seg"><b class="s">00</b><small>秒</small></span>
</div>

.bnto-cd {
  --c1: hsl(345 80% 55%);
  display: flex; gap: 8px; justify-content: center;
}
.bnto-cd .seg {
  width: 58px; background: #fff;
  border: 2px solid #DFE9F1; border-radius: 12px;
  padding: 10px 0 8px; text-align: center;
}
.bnto-cd .seg b {
  display: block; font-size: 21px; font-weight: 900;
  color: var(--c1); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.bnto-cd .seg small { font-size: 10px; font-weight: 700; color: #5A6B7A; }
/* 期限切れになるとJSが is-end を付ける */
.bnto-cd.is-end .seg b { color: #b8b2a7; }

// data-deadline の日時までを 日:時:分:秒 で毎秒更新
(function () {
  document.querySelectorAll('[data-bnto-countdown]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var goal = new Date(box.dataset.deadline).getTime();
    var d = box.querySelector('.d'), h = box.querySelector('.h');
    var m = box.querySelector('.m'), s = box.querySelector('.s');
    function pad(n) { return (n < 10 ? '0' : '') + n; }
    function tick() {
      var sec = Math.max(0, Math.floor((goal - Date.now()) / 1000));
      d.textContent = Math.floor(sec / 86400);
      h.textContent = pad(Math.floor(sec / 3600) % 24);
      m.textContent = pad(Math.floor(sec / 60) % 60);
      s.textContent = pad(sec % 60);
      if (sec > 0) setTimeout(tick, 1000);
      else box.classList.add('is-end'); // 期限切れ
    }
    tick();
  });
})();

使い方のコツ

セール終了・イベント開始・受付締切などに使えます。期限を過ぎると 0 で停止して is-end クラスが付くので、CSSで「終了しました」の表示に切り替えられます。時刻は閲覧者の端末時計基準になる点だけ注意してください。

お手伝いできること

タイプライター

<!-- data-words：カンマ区切りで複数フレーズ -->
<p class="bnto-type" data-bnto-type data-words="Webサイト制作,バナーデザイン,ロゴ・ブランディング">
  <span class="pre">お手伝いできること</span>
  <span class="tx"></span><span class="cur" aria-hidden="true"></span>
</p>

.bnto-type {
  --c1: hsl(41 100% 60%);  /* タイプされる文字の色 */
  margin: 0; background: #1D2A36; color: #fff;
  border-radius: 14px; padding: 16px 18px;
  font-size: 16px; font-weight: 800;
  min-height: 76px;  /* 削除中に高さが縮まないように */
}
.bnto-type .pre {
  display: block; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.55); margin-bottom: 6px;
}
.bnto-type .tx { color: var(--c1); }
/* 点滅カーソル */
.bnto-type .cur {
  display: inline-block; width: 2px; height: 1.05em;
  background: var(--c1); margin-left: 2px;
  vertical-align: -3px;
  animation: bnto-type-blink 1s steps(1) infinite;
}
@keyframes bnto-type-blink { 50% { opacity: 0; } }

// 1文字ずつ表示→少し待って削除→次のフレーズへ（無限ループ）
(function () {
  document.querySelectorAll('[data-bnto-type]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var words = el.dataset.words.split(',');
    var tx = el.querySelector('.tx');
    var wi = 0, ci = 0, del = false;
    function loop() {
      var word = words[wi];
      ci += del ? -1 : 1;
      tx.textContent = word.slice(0, ci);
      if (!del && ci === word.length) { del = true; setTimeout(loop, 1600); return; }
      if (del && ci === 0) { del = false; wi = (wi + 1) % words.length; setTimeout(loop, 400); return; }
      setTimeout(loop, del ? 45 : 110); // 削除は速め・表示はゆっくり
    }
    loop();
  });
})();

使い方のコツ

data-words はカンマ区切りで何個でも追加OKです。タイプ速度は setTimeout の 110（表示）/ 45（削除）ミリ秒を調整します。SEO的に重要なキーワードはタイプ演出の外（見出し等）にも静的テキストで置いておくのが安心です。

顧客満足度

円形プログレス

<!-- data-to：0〜100 のパーセント -->
<div class="bnto-ring" data-bnto-ring data-to="82">
  <div class="ring"><span class="val"><b class="pct">0</b><small>%</small></span></div>
  <p class="lbl">顧客満足度</p>
</div>

.bnto-ring { --c1: hsl(150 58% 42%); text-align: center; }
/* conic-gradient を --p（0〜100）で塗り分け */
.bnto-ring .ring {
  --p: 0;
  position: relative; width: 112px; height: 112px;
  margin: 0 auto; border-radius: 50%;
  background: conic-gradient(var(--c1) calc(var(--p) * 1%), #DFE9F1 0);
  display: grid; place-items: center;
}
/* 内側を白く抜いてリングにする（insetでゲージの太さが変わる） */
.bnto-ring .ring::before {
  content: ""; position: absolute; inset: 12px;
  border-radius: 50%; background: #fff;
}
.bnto-ring .val { position: relative; font-weight: 900; }
.bnto-ring .pct { font-size: 26px; color: var(--c1); font-variant-numeric: tabular-nums; }
.bnto-ring .val small { font-size: 12px; margin-left: 1px; }
.bnto-ring .lbl { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #5A6B7A; }

// 見えたらゲージと%数字を同時にカウントアップ（クリック/リプレイで再生）
(function () {
  document.querySelectorAll('[data-bnto-ring]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var to = Math.min(100, parseFloat(box.dataset.to || '75'));
    var dur = parseInt(box.dataset.dur || '1400', 10);
    var ring = box.querySelector('.ring');
    var pct = box.querySelector('.pct');
    var raf = 0;
    function run() {
      cancelAnimationFrame(raf);
      var t0 = null;
      function step(ts) {
        if (!t0) t0 = ts;
        var p = Math.min((ts - t0) / dur, 1);
        var v = to * (1 - Math.pow(1 - p, 3));
        ring.style.setProperty('--p', v); // ゲージ
        pct.textContent = Math.round(v);  // 数字
        if (p < 1) raf = requestAnimationFrame(step);
      }
      raf = requestAnimationFrame(step);
    }
    box.addEventListener('click', run); // リプレイボタン対応
    new IntersectionObserver(function (entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect();
      run();
    }, { threshold: 0.5 }).observe(box);
  });
})();

使い方のコツ

スキルレベル・達成率・満足度の表示に向いています。ゲージの太さは ::before の inset で調整できます（値を大きくすると細いリングに）。3つ横に並べるだけで「数字で語るセクション」が完成します。

00:00.00

ストップウォッチ

<div class="bnto-sw" data-bnto-stopwatch>
  <div class="time">00:00.00</div>
  <div class="btns">
    <button type="button" class="bt-start">開始</button>
    <button type="button" class="bt-stop">停止</button>
    <button type="button" class="bt-reset">リセット</button>
  </div>
</div>

.bnto-sw {
  --c1: hsl(258 47% 54%);
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 18px 16px;
  text-align: center;
}
.bnto-sw .time {
  font-size: 34px; font-weight: 900;
  letter-spacing: 1px; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
/* 計測中は数字に色が付く */
.bnto-sw.is-run .time { color: var(--c1); }
.bnto-sw .btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.bnto-sw .btns button {
  font: inherit; font-size: 12px; font-weight: 800;
  padding: 8px 14px; border-radius: 999px;
  border: 2px solid #DFE9F1; background: #fff; cursor: pointer;
}
.bnto-sw .btns .bt-start { background: var(--c1); border-color: var(--c1); color: #fff; }

// 開始 / 停止 / リセット。performance.now() 基準でズレない
(function () {
  document.querySelectorAll('[data-bnto-stopwatch]').forEach(function (sw) {
    if (sw.dataset.bntoInit) return;
    sw.dataset.bntoInit = '1';
    var disp = sw.querySelector('.time');
    var base = 0, startAt = null, raf = null;
    function pad(n) { return (n < 10 ? '0' : '') + n; }
    function fmt(ms) {
      return pad(Math.floor(ms / 60000)) + ':' +
             pad(Math.floor(ms / 1000) % 60) + '.' +
             pad(Math.floor(ms / 10) % 100);
    }
    function frame() {
      disp.textContent = fmt(base + performance.now() - startAt);
      raf = requestAnimationFrame(frame);
    }
    sw.querySelector('.bt-start').addEventListener('click', function () {
      if (startAt !== null) return; // 計測中は無視
      startAt = performance.now();
      sw.classList.add('is-run');
      frame();
    });
    sw.querySelector('.bt-stop').addEventListener('click', function () {
      if (startAt === null) return;
      base += performance.now() - startAt;
      startAt = null;
      cancelAnimationFrame(raf);
      sw.classList.remove('is-run');
    });
    sw.querySelector('.bt-reset').addEventListener('click', function () {
      base = 0; startAt = null;
      cancelAnimationFrame(raf);
      sw.classList.remove('is-run');
      disp.textContent = '00:00.00';
    });
  });
})();

使い方のコツ

表示は「分:秒.1/100秒」形式です。performance.now() の差分で計算しているので、描画が多少もたついても計測値はズレません。停止→開始で続きから再開できます（ラップ計測風の使い方もOK）。

サイト開設から0日

経過日数カウンター

<!-- data-from：起点の日付（YYYY-MM-DD） -->
<p class="bnto-days" data-bnto-days data-from="2020-04-01">
  サイト開設から<span class="num">0</span>日
</p>

.bnto-days {
  --c1: hsl(187 63% 42%);
  margin: 0; background: #fff;
  border: 2px solid #DFE9F1; border-radius: 14px;
  padding: 18px 16px; text-align: center;
  font-size: 13px; font-weight: 800;
}
.bnto-days .num {
  font-size: 36px; font-weight: 900;
  color: var(--c1); margin: 0 5px; line-height: 1;
  font-variant-numeric: tabular-nums;
}

// data-from の日付から今日までの経過日数を表示
(function () {
  document.querySelectorAll('[data-bnto-days]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // T00:00:00 を付けてローカル時間の0時として解釈させる
    var from = new Date(el.dataset.from + 'T00:00:00');
    var days = Math.floor((new Date() - from) / 86400000);
    el.querySelector('.num').textContent = days.toLocaleString('ja-JP');
  });
})();

使い方のコツ

「創業から◯日」「無事故継続◯日」「記念日から◯日」などに使えます。手動更新が不要なのがポイントです。当日を「1日目」と数えたい場合は days に + 1 してください。

回

累計ダウンロード

数字ロール（オドメーター風）

<!-- data-to：目標の数字。カンマもそのまま表示される -->
<div class="bnto-roll">
  <span class="digits" data-bnto-roll data-to="2,489"></span><span class="unit">回</span>
  <p class="lbl">累計ダウンロード</p>
</div>

.bnto-roll {
  --c1: hsl(26 90% 55%);
  --dur: 1.6s;  /* ロールの所要時間 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 20px 18px 16px;
  text-align: center;
}
.bnto-roll .digits {
  display: inline-flex; align-items: flex-start;
  font-size: 38px; font-weight: 900;
  line-height: 1; color: var(--c1);
  font-variant-numeric: tabular-nums;
}
/* 各桁：1文字分の窓から 0〜9 の帯を覗かせる */
.bnto-roll .col { display: block; height: 1em; overflow: hidden; }
.bnto-roll .strip {
  display: flex; flex-direction: column;
  transition: transform var(--dur) cubic-bezier(.16, 1, .3, 1);
}
.bnto-roll .strip span { display: block; height: 1em; line-height: 1; }
.bnto-roll .sep { display: block; }
.bnto-roll .unit { font-size: 15px; font-weight: 800; margin-left: 3px; }
.bnto-roll .lbl { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #5A6B7A; }

// 0〜9 の帯を桁ごとに作り、transform で目的の数字までロール
(function () {
  document.querySelectorAll('[data-bnto-roll]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var cols = [];
    String(el.dataset.to).split('').forEach(function (ch) {
      if (/[0-9]/.test(ch)) {
        var col = document.createElement('span');
        col.className = 'col';
        var strip = document.createElement('span');
        strip.className = 'strip';
        for (var i = 0; i <= 9; i++) {
          var d = document.createElement('span');
          d.textContent = i;
          strip.appendChild(d);
        }
        col.appendChild(strip);
        el.appendChild(col);
        cols.push({ strip: strip, n: +ch });
      } else {
        // カンマや小数点はそのまま表示
        var sep = document.createElement('span');
        sep.className = 'sep';
        sep.textContent = ch;
        el.appendChild(sep);
      }
    });
    function play() {
      // いったん 0 に巻き戻してから再ロール
      cols.forEach(function (c) {
        c.strip.style.transition = 'none';
        c.strip.style.transform = 'translateY(0)';
      });
      void el.offsetWidth; // リセットを反映してから再開
      cols.forEach(function (c, i) {
        c.strip.style.transition = '';
        // 左の桁から時間差で揃っていく
        setTimeout(function () {
          c.strip.style.transform = 'translateY(-' + c.n + 'em)';
        }, 120 * i);
      });
    }
    new IntersectionObserver(function (entries, obs) {
      if (!entries[0].isIntersecting) return;
      obs.disconnect(); // 初回は見えた瞬間に一度だけ
      play();
    }, { threshold: 0.5 }).observe(el);
    // クリックでもう一度再生
    var wrap = el.closest('.bnto-roll') || el;
    wrap.style.cursor = 'pointer';
    wrap.addEventListener('click', play);
  });
})();

使い方のコツ

アニメーションはCSSの transform だけなので軽量です。ロール速度は --dur、桁ごとの時間差はJSの 120（ミリ秒）で調整します。data-to="2,489" のようにカンマ入りで書けばそのまま区切り表示されます。プレビューをクリック（または ↺ ボタン）で再生し直せます。

判定中…

営業時間 10:00〜19:00（平日）

営業中／営業時間外の自動表示

<!-- data-open / data-close：営業時間、data-days：営業曜日（0=日曜〜6=土曜） -->
<div class="bnto-open" data-bnto-open data-open="10:00" data-close="19:00" data-days="1,2,3,4,5">
  <span class="badge" aria-live="polite">判定中…</span>
  <p class="lbl">営業時間 10:00〜19:00（平日）</p>
</div>

.bnto-open {
  --c1: hsl(150 55% 42%);  /* 営業中バッジの色 */
  max-width: 290px; background: #fff;
  border: 2px solid #DFE9F1; border-radius: 14px;
  padding: 18px 16px; text-align: center;
}
/* 営業時間外はグレー */
.bnto-open .badge {
  display: inline-block; padding: 7px 18px;
  border-radius: 999px; background: #8a94a0;
  color: #fff; font-size: 13px; font-weight: 800;
  letter-spacing: .04em;
  transition: background .3s;
}
/* 営業中はJSが is-open を付けて緑に */
.bnto-open.is-open .badge { background: var(--c1); }
.bnto-open .lbl { margin: 9px 0 0; font-size: 12px; font-weight: 700; color: #5A6B7A; }

// data-open〜data-close と data-days（0=日曜）で営業中かを判定し、毎分更新
(function () {
  document.querySelectorAll('[data-bnto-open]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var badge = box.querySelector('.badge');
    var days = (box.dataset.days || '1,2,3,4,5').split(',').map(Number);
    function toMin(t) { var a = t.split(':'); return (+a[0]) * 60 + (+a[1]); }
    var open = toMin(box.dataset.open || '10:00');
    var close = toMin(box.dataset.close || '19:00');
    function update() {
      var now = new Date();
      var cur = now.getHours() * 60 + now.getMinutes();
      var on = days.indexOf(now.getDay()) !== -1 && cur >= open && cur < close;
      box.classList.toggle('is-open', on);
      badge.textContent = on ? '営業中' : '営業時間外';
    }
    update();
    setInterval(update, 60000); // 毎分更新
  });
})();

使い方のコツ

営業日は data-days に 0=日曜〜6=土曜の番号をカンマ区切りで指定します（表示は毎分自動更新）。判定は閲覧者の端末（クライアント）時刻基準のため、祝日・臨時休業には対応せず、厳密な営業制御には向きません。店舗サイトの「いま営業中？」の目安表示として使ってください。

----年--月--日（-）

--:--:--

リアルタイム時計

<div class="bnto-clock" data-bnto-clock>
  <p class="date">----年--月--日（-）</p>
  <div class="time">--:--:--</div>
</div>

.bnto-clock {
  --c1: hsl(213 70% 48%);  /* 時刻の色 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 18px 16px;
  text-align: center;
}
.bnto-clock .date { margin: 0 0 6px; font-size: 12px; font-weight: 700; color: #5A6B7A; }
.bnto-clock .time {
  font-size: 34px; font-weight: 900;
  color: var(--c1); line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

// 現在時刻（時:分:秒）と日付・曜日を毎秒更新
(function () {
  document.querySelectorAll('[data-bnto-clock]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var dateEl = box.querySelector('.date');
    var timeEl = box.querySelector('.time');
    var week = ['日', '月', '火', '水', '木', '金', '土'];
    function pad(n) { return (n < 10 ? '0' : '') + n; }
    function tick() {
      var now = new Date();
      dateEl.textContent = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' +
                           now.getDate() + '日（' + week[now.getDay()] + '）';
      timeEl.textContent = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());
      setTimeout(tick, 1000 - Date.now() % 1000); // 秒の切り替わりに同期
    }
    tick();
  });
})();

使い方のコツ

次の更新を 1000 - Date.now() % 1000 ミリ秒後に予約しているので、秒の切り替わりにピタッと同期します。時刻だけにしたい場合は .date の行を削除してOKです。受付ページやデジタルサイネージ風の画面のほか、営業中バッジと並べると「いま何時で、いま営業中か」が一目で伝わります。表示は閲覧者の端末時計基準です。

この記事は約1分で読めます

ここが本文エリアです。data-target で指定した要素の文字数を数え、1分あたりの文字数（data-cpm）で割って読了時間を計算します。空白や改行は文字数に含めません。実際の記事ページでは、本文を囲む要素の id を指定してください。

読了時間の自動計算

<!-- data-target：本文のセレクタ / data-cpm：1分あたりの文字数 -->
<div class="bnto-rt">
  <p class="badge" data-bnto-readtime data-target="#post-body" data-cpm="500">この記事は約<b class="min">1</b>分で読めます</p>
  <div class="art" id="post-body">ここに記事の本文が入ります。</div>
</div>

.bnto-rt {
  --c1: hsl(160 55% 40%);  /* バッジの色 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 16px;
}
.bnto-rt .badge {
  display: inline-block; margin: 0; padding: 6px 14px;
  border-radius: 999px; background: var(--c1);
  color: #fff; font-size: 12px; font-weight: 800;
}
.bnto-rt .badge .min { font-size: 15px; margin: 0 2px; font-variant-numeric: tabular-nums; }
.bnto-rt .art {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px dashed #DFE9F1;
  font-size: 11px; line-height: 1.9; color: #5A6B7A;
}

// data-target の要素の文字数から「約◯分で読めます」を自動計算
(function () {
  document.querySelectorAll('[data-bnto-readtime]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    var target = document.querySelector(el.dataset.target || 'main');
    if (!target) return;
    var cpm = parseInt(el.dataset.cpm || '500', 10); // 1分あたりに読める文字数
    var len = target.textContent.replace(/\s/g, '').length; // 空白・改行は数えない
    el.querySelector('.min').textContent = Math.max(1, Math.round(len / cpm));
  });
})();

使い方のコツ

日本語の読了速度は1分あたり400〜600文字が目安で、data-cpm で調整できます（じっくり読ませる技術記事なら小さめに）。文字数は textContent ベースの概算なので、見出しやキャプションも含まれます。バッジを複数設置して data-target をそれぞれ変えれば、記事一覧の各カードにも使えます。

1回目のご訪問です

はじめまして！

訪問回数カウンター

<!-- data-key：localStorage の保存キー（サイト内で固有に） -->
<div class="bnto-visit" data-bnto-visitcount data-key="bnto-visit-demo">
  <p class="msg" aria-live="polite"><b class="num">1</b>回目のご訪問です</p>
  <p class="lbl">はじめまして！</p>
  <button type="button" class="bt-reset">リセット（デモ用）</button>
</div>

.bnto-visit {
  --c1: hsl(288 45% 50%);  /* 数字の色 */
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 14px; padding: 18px 16px;
  text-align: center;
}
.bnto-visit .msg { margin: 0; font-size: 13px; font-weight: 800; }
.bnto-visit .num {
  font-size: 36px; font-weight: 900;
  color: var(--c1); margin: 0 4px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bnto-visit .lbl { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #5A6B7A; }
/* デモ用のリセットボタン（本番では削除OK） */
.bnto-visit .bt-reset {
  margin-top: 12px; font: inherit; font-size: 11px; font-weight: 700;
  padding: 6px 12px; border-radius: 999px;
  border: 2px solid #DFE9F1; background: #fff; color: #5A6B7A; cursor: pointer;
}

// localStorage で訪問回数を記録して「◯回目のご訪問です」を表示
(function () {
  document.querySelectorAll('[data-bnto-visitcount]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var key = box.dataset.key || 'bnto-visitcount';
    var num = box.querySelector('.num');
    var lbl = box.querySelector('.lbl');
    function show(n) {
      num.textContent = n.toLocaleString('ja-JP');
      if (lbl) lbl.textContent = n === 1 ? 'はじめまして！' : 'いつもありがとうございます！';
    }
    var count = 1;
    try {
      count = parseInt(localStorage.getItem(key) || '0', 10) + 1;
      localStorage.setItem(key, count);
    } catch (e) {} // プライベートモード等で保存できない場合は 1 回目扱い
    show(count);
    var reset = box.querySelector('.bt-reset');
    if (reset) reset.addEventListener('click', function () {
      try { localStorage.setItem(key, '1'); } catch (e) {}
      show(1);
    });
  });
})();

使い方のコツ

回数は localStorage に保存されるため、ブラウザ・端末ごとのカウントです。アクセス解析ではなく「おかえりなさい」演出として使ってください。保存キーは data-key で変更でき、ページごとに別のキーにすれば個別カウントも可能です。リセットボタンはデモ用なので、本番では .bt-reset の行ごと削除してOKです。

カウントアップ・タイマーJSの基礎知識

数字のカウントアップやカウントダウンは、実績や緊急性を「動き」で伝える定番の演出です。止まった「導入実績1,280件」より、0からスルスルと増えて1,280で止まる数字のほうが視線を集め、記憶に残ります。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもカウントアップ専用プラグインも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。目標値や日時は data-to / data-deadline / data-from などの属性で指定します。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

実績数字は「動く」と説得力が増す

採用サイトの「社員数」、コーポレートサイトの「取引社数」、LPの「導入実績」。数字はそのままでも強いコンテンツですが、カウントアップさせるとアイキャッチ効果が加わり、スクロールの手が止まります。コツは1〜2秒でサッと終わらせることと、easeOut（終盤で減速）を使うことです。最後にゆっくり目標値へ吸い付く動きが「確定した実績」の印象を作ります。ダラダラ長いカウントは逆効果です。

requestAnimationFrame と setInterval の使い分け

毎フレーム数字を描き換えるカウントアップには requestAnimationFrame が最適です。画面の描画タイミングと同期して呼ばれるためカクつきが少なく、非表示タブでは自動停止するのでバッテリーにも優しい仕組みです。一方、1秒に1回の更新で十分なカウントダウン時計や時刻表示に毎フレーム処理は過剰なので、setTimeout / setInterval で足ります。またアニメーションの進捗は「経過時間 ÷ 所要時間」で計算するのが鉄則です。フレームごとの加算では、端末の性能によって速さが変わってしまいます。

IntersectionObserver で「見えてから」動かす

カウントアップをページ読み込みと同時に始めると、ユーザーがスクロールして到達したときにはすでに動き終わっているという残念な事故が起きます。IntersectionObserver で要素が画面に入った瞬間を検知してから開始すれば、必ず「動いているところ」を見てもらえます。スクロール量を毎回計算する古い方法と違い、監視はブラウザ任せなので負荷もほぼゼロです。一度動かしたら disconnect() して再発火を防ぐのがお約束です。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

カウントアップはいつ始まりますか？

IntersectionObserver でパーツが画面に入ったタイミングで一度だけ始まります。ページ読み込み直後に画面外でこっそり終わってしまう心配がありません。開始位置は threshold（しきい値）で調整できます。

setInterval ではなく requestAnimationFrame を使う理由は？

requestAnimationFrame は画面の描画タイミングと同期して呼ばれるため、カクつきの少ないなめらかなアニメーションになります。非表示タブでは自動的に止まるので無駄な処理も発生しません。1秒刻みで十分なカウントダウン時計には setTimeout を使っています。

カウントダウンの目標日時はどう指定しますか？

data-deadline 属性に「2026-12-31T23:59:59」のような形式で指定します。期限を過ぎると 0 で停止し、is-end クラスが付与されるので「終了しました」表示への切り替えも簡単です。

同じページに複数設置しても大丈夫ですか？

大丈夫です。初期化スクリプトは data 属性で対象を自動検出し、初期化済みの要素はスキップするため、複数設置してもコードを2回貼っても壊れません。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「カンマ区切りカウントアップ」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

カウント・タイマーJS実装 12選

数値カウントアップ

カンマ区切りカウントアップ

カウントダウンタイマー

タイプライター

円形プログレス

ストップウォッチ

経過日数カウンター

数字ロール（オドメーター風）

営業中／営業時間外の自動表示

リアルタイム時計

読了時間の自動計算

訪問回数カウンター

カウントアップ・タイマーJSの基礎知識

実績数字は「動く」と説得力が増す

requestAnimationFrame と setInterval の使い分け

IntersectionObserver で「見えてから」動かす

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ