数字スロット回転見出し

<div class="d02-01-22-stage">
          <h4 class="d02-01-22-h">導入企業数 <span class="d02-01-22-slots" id="d02-01-22-slots-02-01-22"></span> 社</h4>
          <button type="button" class="d02-01-22-btn">スロットを回す</button>
        </div>

.prev.d02-01-22{ background:#f8f7f3; }
        .d02-01-22 .d02-01-22-stage{ text-align:center; }
        .d02-01-22 .d02-01-22-h{
          font-size:22px;
          font-weight:700;
          color:#1a2333;
          letter-spacing:.03em;
        }
        .d02-01-22 .d02-01-22-slots{
          display:inline-flex;
          gap:2px;
          vertical-align:middle;
          margin:0 4px;
        }
        .d02-01-22 .d02-01-22-col{
          display:inline-block;
          width:22px;
          height:34px;
          overflow:hidden;
        }
        .d02-01-22 .d02-01-22-strip{
          display:flex;
          flex-direction:column;
        }
        .d02-01-22 .d02-01-22-digit{
          height:34px;
          line-height:34px;
          font-size:26px;
          font-weight:800;
          color:#2563eb;
          text-align:center;
        }
        .d02-01-22 .d02-01-22-btn{
          display:block;
          margin:14px auto 0;
          padding:8px 18px;
          font-size:12px;
          font-weight:700;
          letter-spacing:.08em;
          color:#fff;
          background:#2563eb;
          border:none;
          border-radius:20px;
          cursor:pointer;
        }

(function(){
        var root = document.querySelector('#item-02-01-22 .d02-01-22-slots');
        var btn = document.querySelector('#item-02-01-22 .d02-01-22-btn');
        if(!root || !btn) return;
        var DIGIT_H = 34;
        var cols = [];
        for(var c = 0; c < 3; c++){
          var col = document.createElement('span');
          col.className = 'd02-01-22-col';
          var strip = document.createElement('span');
          strip.className = 'd02-01-22-strip';
          for(var r = 0; r < 3; r++){
            for(var d = 0; d <= 9; d++){
              var digitEl = document.createElement('span');
              digitEl.className = 'd02-01-22-digit';
              digitEl.textContent = String(d);
              strip.appendChild(digitEl);
            }
          }
          col.appendChild(strip);
          root.appendChild(col);
          cols.push(strip);
        }
        var targets = [1, 2, 8];
        function setPos(strip, loop, digit, animate){
          strip.style.transition = animate ? 'transform 1.5s cubic-bezier(.15,.85,.3,1)' : 'none';
          var idx = loop * 10 + digit;
          strip.style.transform = 'translateY(' + (-idx * DIGIT_H) + 'px)';
        }
        cols.forEach(function(strip, i){ setPos(strip, 0, targets[i], false); });
        btn.addEventListener('click', function(){
          cols.forEach(function(strip, i){
            var target = Math.floor(Math.random() * 10);
            targets[i] = target;
            setPos(strip, 1, target, true);
          });
        });
      })();